Веб-шрифты vs. Шрифты для веба

Хороший доклад, спасибо.

Было интересно.
Все же, что за шрифт в заголовке ? :)

Круто! Спасибо! Это и минское - два разных выступления, оба послушал с интересом. Можно было бы еще фото выступающего врезать между слайдами, для оживляжа.

Спасибо за как всегда въедливое исследование, Вадим! Ты, можно сказать, дал отмашку отказаться наконец от Cufon, который я обычно использую :)

С возвращением, Вадим! Мы скучали, правда-правда.

Такой вопрос:
допустим я сделал отображение заголовков внедрённым шрифтом.
эти заголовки на сайте создаются динамически авторами статьи.
если автор использует символ, который отсутствует в шрифте (к примеру у меня шрифт с латиницей, а в автор напишет кириллицей), то этот символ:
а) вообще не отобразится
б) отобразится, но стандартным шрифтом, следующем в списке font-family после внедрённого

Питерский дизайнер

neucha (lemonad) ?

Вадим, у меня к тебе глупый вопрос. Может ты, как человек работающий в Opera, знаешь как убрать скролл у текстарии в одноименном браузере? И чем вообще появление этого скролла обосновано? Мне правда интересно.

Enlightened, во что вы не верите? В то, что это будет разумно?

Ви, на Гостевом аккаунте все работает :) Не знаю что там с IE6, но в IE8(7) даже режим совместимости показывает шрифт.

Никита, это нужно попросить разработчиков Webkit, чтобы они делали так же, как Firefox и Opera.

Докладчик, т.е. я, априори не может быть объективен. Да и не претендует. Однако через весь рассказ идёт мысль о том, что все эти технологии были крайне неестественны для браузера, уж не говоря про сложность внедрения, нагрузку на браузер и прочие чудеса техники. Ну и подобная работа на контрастах в докладе возможна только в ситуации, когда есть реальная альтернатива старым решениям. Не будь этой альтернативы, разговор о трюках вёлся бы совсем в другом тоне.

Чес слово, никого не хотел обидеть.

Автор доклада явно не любит лицензии на шрифты и дизайнеров, которые хотят на своей работе зарабатывать. Ну, что ж... Я лично с трудом представляю кучу дизайнеров тратящих кучу своего времени на разработку бесплатных шрифтов. хороших бесплатных шрифтов. Те же работы Jovanny Lemonad (при всем уважении к нему) - это шрифты ниже среднего качества. Вполне имеют право на жизнь, но это средний минус сегмента, как любят говорить маркетологи. А крупные студии, которые могут делать большие шрифтовые проекты не охотно идут на открытую лицензию, по вполне понятным и объективным причинам. Ну вот Паратайп сделали PT Sans. Скоро ли еще появится другой такой проект? Сомнительно. Общий вывод - проблемы использования шрифтов в вебе нет. Ну почти нет. Есть бооольшая проблема лицензирования такого использования. И наиболее адекватное её решение лежит не в области веб-технологий, а в области авторского права и способов получения авторами роялити.

Спасибо за доклад, Вадим. Сейчас в работе над новым проектом решил подключать шрифт для заголовков так же, как у вас на этом сайте. Но есть вид загловков, которые требуется покрасить градиентом, поэтому для них буду использовать картинки.

Скажите пожалуйста, а с точки зрения семантики имеет ли смысл эти загловки помещать в теги H? например:

<h2><img src="header.png" alt="Загловок" /></h2>

или правильней будет сделать так:

<div class="title"><img src="header.png" alt="Загловок" /></div>

На самом деле вопрос встал давно, только некому было его задать

о, боже! это суперизящный финт:)

но он требует уникального стиля для каждого H2:after, по-моему нецелесообразно это описывать в общем файле стилей, потому что заголовки-картинки должны меняться через админку и выводиться в шаблон smarty... если только некий суперпрограммист не напишет шаблонизатор для css

так что в чистом виде это реализовать не получится, поэтому фон придется задавать встроенным стилем и вместо :after использовать вложенный span:

<h2>{$item.TITLE}<span style="background:url({$item.IMG}) no-repeat"></span></h2>

H2 {
    position: relative;
    overflow:hidden;
    width:title_width;
    height:0;
    padding: title_height 0 0 0;
    }
H2 span {
    position:absolute;
    top:0;
    left:0;
    width:title_width;
    height:title_height;
    background:url(title.png) no-repeat;
    content:'';
    }

с другой стороны можно было бы не трогать тот код, который вы предложили и сделать все с помощью H2:after, но с использованием JS. правда, тогда точно не удастся избежать шквала ненависти со стороны человека, который в будущем займется поддержкой этого кода;)

спасибо за доклад, довольно познавательно было услышать о положительных и отрицательных сторонах каждого способа.
font-face конечно удобно, никакого js, но слишком уж долгий рендеринг, особенно если нестандартный шрифт используется в нескольких местах, Cufon все же пошустрее.

Доброй ночи, Вадим.

У меня на висте (в других не пробовал) в опере
Opera/9.80 (Windows NT 6.0; U; en) Presto/2.9.168 Version/11.51 не подключается шрифт, во всех остальных и в ие6 в том числе, все отлично.

Тестировал на сгенерированном белкой наборе. И с локального и с сервака не работает, с полными и относительными путями тоже самое.

Набрел на эту темку на my.opera.com и действительно у меня кириллица в пути присутствует.

Проверил специально в портейбл-версии Opera/9.80 (Windows NT 6.0; U; Edition United States Local; en) Presto/2.9.168 Version/11.51 все отлично.

Ты конечно об этом знаешь и может быть есть решение, в общем как, собственно, быть? Или смириться и ждать пока суровые викинги полюбят кириллицу? :)

Спасибо.

Еще один вопросец, как быть с начертаниями шрифта, к примеру, если необходим полужирный, подключать дополнительное "жирное" начертание этого шрифта отдельным файлом и действовать примерно так?

@font-face {
    font-family: 'myFont';
    src: url('fonts/my-font.eot');
    src: url('fonts/my-font.eot?#iefix') format('embedded-opentype'),
         url('fonts/my-font.woff') format('woff'),
         url('fonts/my-font.ttf') format('truetype'),
         url('fonts/my-font.svg#myFont') format('svg');
         font-weight:normal;
    }

@font-face {
    font-family: 'myFont';
    src: url('my-font-bold.eot');
    src: url('my-font-bold.eot?#iefix') format('embedded-opentype'),
         url('my-font-bold.woff') format('woff'),
         url('my-font-bold.ttf') format('truetype'),
         url('my-font-bold.svg#myFontBold') format('svg');
    font-weight:bold;
    }

У меня снова пичалька с @font-face.

Шрифтобелка отказывается генерировать файлы с поддержкой кириллицы. Шрифт Open Sans, беру с гугла, естественно отмечаю поддержку кириллицы. Скачиваю ttf-файл, и отдаю его шрифтобелке, вставляю текст кириллицей прямо в ее демку, латиница подхватывается, а кириллица нет :( попробовал тот же файлик с гугла скормить вот этому зверю: font2web.com/. Там тоже четыре файлика генерится .eot, .svg, .ttf, .woff.

Подключаю их к белкиной демке, чтобы не напортачить и чудесным образом кириллица тоже работает, но все символы конвертятся очень коряво, тогда как в белкиных файлах все красиво (с латиницей).

Кстати если напрямую с гугла подгружать шрифт, то в этом случае кириллица работает, но там ведь, как я понял, подгружается только файл формата .woff и работает это только в нормальных браузерах. Хотя я пробовал и этот файлик белке скармливать, но эффект тот же, что и с .ttf — кириллица не отображается этим шрифтом. Где-то я туплю, а понять где — не пойму :)