Эта статья написана Джоном Даггеттом(John Daggett) — сотрудником компании Mozilla, который много работал с дизайнерами шрифтов и web программистами чтобы улучшить положение шрифтов в web. Статья представляет из себя поверхностный обзор новых возможностей и содержит некоторые примеры применения WOFF(Web Open Font Format). Полный список других работающих в этой области организаций вы можете найти на официальном блоге Mozilla (архив).
В Firefox 3.5 мы включили поддержку (архив) подключения шрифтов формата TrueType и OpenType. В Firefox 3.6 мы включим поддержку нового формата шрифтов Web Open Font Format или WOFF, который имеет два основных преимущества перед сырыми TrueType и OpenType:
— это сжатый формат, значит вы увидите намного меньший объем загружаемых данных, чем при использовании сырых TrueType или OpenType;
— он содержит информацию о том, откуда пришел этот шрифт, но без DRM или подписей для конкретного домена, это означает что он поддерживается (архив) множеством дизайнеров и организаций занимающихся шрифтами.
WOFF родился в результате сотрудничества дизайнеров шрифтов Эрика ван Блокланда(Erik van Blokland (архив)) и Тола Леминга(Tal Leming (архив)). Им оказывал помощь Джонатан Кью(Jonathan Kew) из Mozilla. Каждый предложил(архив) свой формат и WOFF представляет собой слияние этих предложений. Формат планировался как простая перепаковка OpenType и TrueType, он не представляет новых функций, альтернатив механизму подключения @font-face или нового способа рендеринга. Множество производителей шрифтов высказались в поддержку (архив) нового формата, так что есть надежда, что этот формат откроет новые горизонты для web дизайнеров.
Во-первых сжатие теперь часть WOFF, и web мастера могут уменьшить размер своих страниц, используя сжатые шрифты. В новом формате применено сжатие без потерь, так, что распакованный шрифт совпадает с оригинальным OpenType или TrueType, что позволяет оставить неизменным механизм рендеринга. Подобное сжатие может быть получено сжатием HTTP, но поскольку сжатие включено в сам формат WOFF его проще использовать, особенно в ситуациях когда отсутствует доступ к настройкам сервера.
Во-вторых формат включает дополнительные метаданные, в которые производитель шрифта может включить информацию об использовании шрифта. Эта информация не влияет на то как этот шрифт будет загружен, но позволяет определить происхождение этого шрифта, так заинтересовавший шрифтом использованным на web странице может проследить какой шрифт использован. Шрифты в WOFF сжаты, но не зашифрованы, этот формат не создавался как защищенный формат для желающих жестко контролировать использование шрифта.
Пока Firefox 3.6 не вышел, вы можете протестировать WOFF в ночных сборках Firefox.
Ниже простой пример, который показывает как написать @font-face правило чтобы подключить WOFF шрифт. Для корректной работы браузеров, которые поддерживают только прямое подключение OpenType и TrueType шрифтов напишем в src дескрипторе WOFF шрифт первым, с указанием типа «woff», и TrueType версию шрифта после него:
Браузеры поддерживающие WOFF загрузят WOFF файл, а другие браузеры, которые поддерживают @font-face, но всё еще не поддерживают WOFF будут использовать TrueType версию. По мере распространения WOFF, необходимость указывать ссылки на несколько форматов шрифтов будет уменьшаться.
Другие примеры ниже показывают как использовать WOFF шрифты, причем так, чтобы они работали в любом браузере, поддерживающем @font-face, включая Internet Explorer.
Ниже пример того, как загружаемые шрифты могу быть использованы в отображении мало поддерживаемых языков. Пример показывает Декларацию Прав Человека, переведенную на два африканских языка, и то как она будет отображена стандартными шрифтам браузера против загружаемого, применимого для отображения этих языков шрифта.
Обратите внимание на то, что в первом случае 3.1 MB TTF файл был сжат до 1 MB WOFF, а во втором 172KB TTF был сжат до 80KB WOFF.
Firefox 3.6 будет первым выпущенным браузером с поддержкой WOFF, и важно сделать @font-face правила, которые будут правильно работать на браузерах без поддержки WOFF. В данном случае хорошо помогает явное указание типа шрифта, для обозначения формата перед его загрузкой, браузеры которые не поддерживают указанный тип просто проигнорируют его.
Internet explorer, включая IE8 поддерживает только формат EOT и реализует не полную поддержку @font-face. Это делает написание кросс-браузерного правила @font-face особенно хитрым. Одно из решений — написать несколько разных правил:
Неприятным моментом является то, что IE не понимает подсказки формата и не распознает @font-face URL корректно, соответственно web мастера увидят такие записи в логах:
IE успешно загружает EOT версию шрифта, но еще пытается загрузить WOFF файл, несмотря на имеющуюся подсказку. Эта попытка оказывается неудачной, и, хотя она не влияет на отображение страницы, она расходует ресурсы сервера. Обсуждения проблемы можно найти в блоге (архив) Пола Айриша (Paul Irish).
Еще одной проблемой IE является то, что он пытается загрузить все файлы шрифтов, вне зависимости от того используются они или нет. Это делает сложным использование единого CSS файла для всего сайта, так как IE попытается загрузить все указанные там шрифты расходуя трафик впустую. (Это негативно скажется как на сервере, так и на клиенте. Примечание переводчика.)
Документация
Latest draft WOFF specification
Original blog post on using @font-face
CSS3 Fonts working draft
MDC @font-face documentation
Инструменты
Jonathan Kew’s sample encoding/decoding code
woffTools – tools for examining and validating WOFF files
FontTools/TTX – Python library and tool for manipulating font data
Web-based font subsetting tool
Примеры использования @font-face
CSS @ Ten: The Next Big Thing
Example layout using Graublau Sans
Examples of Interesting Web Typography
The Elements of Typographic Style Applied to the Web
Источники шрифтов
Font Squirrel
10 Great Free Fonts for @font-face
40 Excellent Free Fonts by Smashing Magazine
В Firefox 3.5 мы включили поддержку (архив) подключения шрифтов формата TrueType и OpenType. В Firefox 3.6 мы включим поддержку нового формата шрифтов Web Open Font Format или WOFF, который имеет два основных преимущества перед сырыми TrueType и OpenType:
— это сжатый формат, значит вы увидите намного меньший объем загружаемых данных, чем при использовании сырых TrueType или OpenType;
— он содержит информацию о том, откуда пришел этот шрифт, но без DRM или подписей для конкретного домена, это означает что он поддерживается (архив) множеством дизайнеров и организаций занимающихся шрифтами.
WOFF родился в результате сотрудничества дизайнеров шрифтов Эрика ван Блокланда(Erik van Blokland (архив)) и Тола Леминга(Tal Leming (архив)). Им оказывал помощь Джонатан Кью(Jonathan Kew) из Mozilla. Каждый предложил(архив) свой формат и WOFF представляет собой слияние этих предложений. Формат планировался как простая перепаковка OpenType и TrueType, он не представляет новых функций, альтернатив механизму подключения @font-face или нового способа рендеринга. Множество производителей шрифтов высказались в поддержку (архив) нового формата, так что есть надежда, что этот формат откроет новые горизонты для web дизайнеров.
Детали различий между TrueType, OpenType и WOFF
Во-первых сжатие теперь часть WOFF, и web мастера могут уменьшить размер своих страниц, используя сжатые шрифты. В новом формате применено сжатие без потерь, так, что распакованный шрифт совпадает с оригинальным OpenType или TrueType, что позволяет оставить неизменным механизм рендеринга. Подобное сжатие может быть получено сжатием HTTP, но поскольку сжатие включено в сам формат WOFF его проще использовать, особенно в ситуациях когда отсутствует доступ к настройкам сервера.
Во-вторых формат включает дополнительные метаданные, в которые производитель шрифта может включить информацию об использовании шрифта. Эта информация не влияет на то как этот шрифт будет загружен, но позволяет определить происхождение этого шрифта, так заинтересовавший шрифтом использованным на web странице может проследить какой шрифт использован. Шрифты в WOFF сжаты, но не зашифрованы, этот формат не создавался как защищенный формат для желающих жестко контролировать использование шрифта.
Пока Firefox 3.6 не вышел, вы можете протестировать WOFF в ночных сборках Firefox.
Примеры
Ниже простой пример, который показывает как написать @font-face правило чтобы подключить WOFF шрифт. Для корректной работы браузеров, которые поддерживают только прямое подключение OpenType и TrueType шрифтов напишем в src дескрипторе WOFF шрифт первым, с указанием типа «woff», и TrueType версию шрифта после него:
/* Gentium (SIL International) */
@font-face {
font-family: GentiumTest;
src: url(fonts/GenR102.woff) format("woff"),
url(fonts/GenR102.ttf) format("truetype");
}
body {
font-family: GentiumTest, Times, Times New Roman, serif;
}
Браузеры поддерживающие WOFF загрузят WOFF файл, а другие браузеры, которые поддерживают @font-face, но всё еще не поддерживают WOFF будут использовать TrueType версию. По мере распространения WOFF, необходимость указывать ссылки на несколько форматов шрифтов будет уменьшаться.
Другие примеры ниже показывают как использовать WOFF шрифты, причем так, чтобы они работали в любом браузере, поддерживающем @font-face, включая Internet Explorer.
Семейство шрифтов с множеством гарнитур
Использование Postscript CFF
Отображение африканских шрифтов
Ниже пример того, как загружаемые шрифты могу быть использованы в отображении мало поддерживаемых языков. Пример показывает Декларацию Прав Человека, переведенную на два африканских языка, и то как она будет отображена стандартными шрифтам браузера против загружаемого, применимого для отображения этих языков шрифта.
Обратите внимание на то, что в первом случае 3.1 MB TTF файл был сжат до 1 MB WOFF, а во втором 172KB TTF был сжат до 80KB WOFF.
Другой Postscript CFF шрифт
Пример на японском
Работа с другими браузерами
Firefox 3.6 будет первым выпущенным браузером с поддержкой WOFF, и важно сделать @font-face правила, которые будут правильно работать на браузерах без поддержки WOFF. В данном случае хорошо помогает явное указание типа шрифта, для обозначения формата перед его загрузкой, браузеры которые не поддерживают указанный тип просто проигнорируют его.
Internet explorer, включая IE8 поддерживает только формат EOT и реализует не полную поддержку @font-face. Это делает написание кросс-браузерного правила @font-face особенно хитрым. Одно из решений — написать несколько разных правил:
@font-face {
font-family: GentiumTest;
src: url(fonts/GenR102.eot); /* для IE */
}
@font-face {
font-family: GentiumTest;
/* Работает только с браузерами поддерживающими WOFF */
src: url(fonts/GenR102.woff) format("woff");
}
Неприятным моментом является то, что IE не понимает подсказки формата и не распознает @font-face URL корректно, соответственно web мастера увидят такие записи в логах:
GET /fonts/GenR102.eot HTTP/1.1" 200 303536
GET /fonts/GenR102.woff)%20format(%22woff%22) HTTP/1.1" 404 335IE успешно загружает EOT версию шрифта, но еще пытается загрузить WOFF файл, несмотря на имеющуюся подсказку. Эта попытка оказывается неудачной, и, хотя она не влияет на отображение страницы, она расходует ресурсы сервера. Обсуждения проблемы можно найти в блоге (архив) Пола Айриша (Paul Irish).
Еще одной проблемой IE является то, что он пытается загрузить все файлы шрифтов, вне зависимости от того используются они или нет. Это делает сложным использование единого CSS файла для всего сайта, так как IE попытается загрузить все указанные там шрифты расходуя трафик впустую. (Это негативно скажется как на сервере, так и на клиенте. Примечание переводчика.)
Дополнительные ресурсы
Документация
Latest draft WOFF specification
Original blog post on using @font-face
CSS3 Fonts working draft
MDC @font-face documentation
Инструменты
Jonathan Kew’s sample encoding/decoding code
woffTools – tools for examining and validating WOFF files
FontTools/TTX – Python library and tool for manipulating font data
Web-based font subsetting tool
Примеры использования @font-face
CSS @ Ten: The Next Big Thing
Example layout using Graublau Sans
Examples of Interesting Web Typography
The Elements of Typographic Style Applied to the Web
Источники шрифтов
Font Squirrel
10 Great Free Fonts for @font-face
40 Excellent Free Fonts by Smashing Magazine
