Вторая половина 2009 года ознаменовалась возвращением позабытой на долгое время техники внедрения шрифтов в страницы сайтов, с помощью свойства CSS @font-face, которое было предложено в спецификации CSS2 разработчикам браузеров еще в мае 1998 года!
Admin
Первая реализация данного свойства состоялась и того раньше, в 1997 году, когда компания Microsoft выпустила на рынок браузер IE4, позволявший встраивать на вебстраницы шрифты с помощью нового CSS-свойства @font-face, которое позже и было внесено в спецификацию CSS2, в новом формате Embedded OpenType (EOT), специально разработанном для применения в сети интернет. Особенностью формата было наличие компрессии файла и механизма защиты от нелегального копирования с помощью прописывания в корневую строку (RootString) записи со списком доменов, на которых допускается использование шрифта.
Однако, техника внедрения шрифтов по ряду причин провалилась:
В целом техника оказалась несколько преждевременной и долгое время оставалась невостребованной. А когда в ней назрела необходимость, браузеры IE потеряли львиную долю рынка в пользу альтернативных программных продуктов, которые при всех своих плюсах все еще не могли предложить удобного инструмента для решения этой тривиальной задачи, кроме обходных техник, таких как sIFR, Cufón, Typeface.js, Facelift и пр.
Лед тронулся в 2007 году, когда разработчики Webkit заявили о внедрении техники @font-face в новую версию движка, выбрав при этом для поддержки свободные форматы шрифтов TTF и OTF. Производители браузеров последовали этому примеру в течение последующих лет, выпустив Safari 3, Firefox 3.5, Opera 10 с поддержкой @font-face.
В свою очередь, компания Microsoft в 2008 выступила с инициативой продвижения EOT, как открытого стандарта. И в преддверии 2009 года состоялось собрание W3C, на котором присутствовали представители компаний Bitstream, Microsoft, Mozilla, Opera, W3C, Nokia, Monotype и Inventive Designers. Целью встречи было обсуждение сложившейся ситуации со шрифтами для использования во всемирной паутине. Был выдвинут ряд предложений по созданию специальной Рабочей группы по шрифтам (Font WG) и возможное создание нового контейнера для шрифтов.
Сегодня свойство @font-face поддерживает большинство актуальных версий браузеров: IE6-8, Firefox 3.5, Opera 10, Safari 3-4 и Chrome 3. Браузер Google Chrome, основанный на движке WebKit, который также используется в Safari, тоже имеет поддержку @font-face. Однако она пока отключена по соображениям безопасности. Для того, чтобы активировать поддержку этого свойства вручную, нужно инициировать запуск браузера с ключом –enable-remote-fonts. Включение же @font-face по умолчанию обещается разработчиками после решения всех проблем с безопасностью. Планируется это к релизу версии Chrome 4.0 в конце года. Но для Вас я открою один секрет. Версия 3.0 замечательно работает со шрифтами в формате svg! По крайней мере у меня это работает на билде 3.0.195.27 по Windows.
Перечисленные выше браузеры поддерживают использование шрифтов TrueType Font (.ttf) и OpenType Font (.otf), за исключением IE, который, как я сообщал ранее, имеет нативную поддержку исключительно собственного открытого формата Embedded OpenType (.eot). Самой большой проблемой использования EOT является малая распространенность шрифтов в этом формате. Поэтому разработчикам придется научиться конвертировать шрифты TTF и OTF в EOT. Впрочем, это не будет составлять большой сложности, о чем я расскажу далее.
Совсем недавно, 20 октября 2009 года, Mozilla анонсировала поддержку нового формата Web Open Font Format (WOFF) в браузере Firefox, начиная с версии 3.6, выход которой запланирован на ноябрь этого года. Что же представляет из себя новый формат? WOFF является контейнером шрифтов форматов OpenType, Open Font Format или TrueType, специально разработанным для нужд вебразработчиков. К его преимуществам можно отнести компрессию файла и возможность внесения мета-информации, например, об авторах или определения допустимых рамок использования шрифтов, но без DRM. В планах Mozilla продвигать этот формат в качестве вебстандарта. Подробнее о WOFF на русском языке Вы можете прочитать в переводной статье Web Open Font Format в Firefox 3.6.
Одной из главных проблем не технического характера являются правовые аспекты, читай легальность, использования шрифтов. Помните, используя коммерческий шрифт на вебстранице, Вы делаете его доступным для скачивания любому желающему. Поэтому лицензионное соглашение некоторых шрифтов прямо указывает на запрет их использования в сети интернет. А некоторые лицензии и вовсе запрещают коммерческое использование шрифтов. В любом случае, при выборе внедряемого шрифта, «внимательно читайте договор» лицензионное соглашение. Про необходимость оплаты таких шрифтов, думаю, Вы догадались сами.
Золтан Гаврилюк (Zoltan Hawryluk) в своей статье @font-face in Depth представляет список сайтов, на которых опубликованы коллекции шрифтов, лицензия которых допускает их свободное использование в т.ч. и в сети интернет, который с моими дополнениями вы найдете в конце статьи.
Недавно на рынке появилось совершенно уникальное предложение по приобретению и дальнейшему использованию шрифтов в сети интернет. Студия дизайна Typotheque предложила новый тип лицензии Web fonts, согласно которой каждый может приобрести любой шрифт из каталога студии всего за 20% от его стоимости. Главным условием является то, что Вы не можете скачать сам шрифт в виде бинарного файла. Вы получаете возможность подключения приобретенной гарнитуры к вебсайту с помощью запроса соответствующего файла непосредственно с сервера студии. Под каждую лицензию выделяется 500 Мб месячного трафика (~25000 загрузок), а трафик сверх лимита оплачивается по 1 Евро за 1 Гб.
При этом Вы вообще освобождаетесь от применения @font-face самостоятельно. Все что нужно будет сделать, это подключить к документу дополнительный файл со стилями, который сгенерирует для Вас система при покупке шрифта.
Прежде чем приступить к практическому внедрению шрифтов в страницы, мы должны позаботиться об их кроссбраузерной совместимости, т.е. научиться конвертировать доступные шрифты. На мой взгляд, самым простым способом для этого является онлайн-сервис TTF to EOT Font Converter. Который, как видно из названия пока работает только со шрифтами TTF. Конвертация проходит в два шага: вы загружаете TTF-шрифт, Вы скачиваете EOT-шрифт.
Но еще лучшим решением, на мой взгляд (спасибо за наводку Юрию Артюху), является сервис WebFont Generator от студии FontSquirrel, который позволяет одним махом получить архив с набором из оригинального TTF/OTF шрифта, шрифта EOT, шрифта SVG и даже шрифта WOFF! А если Вам этого показалось мало, то Вы получите еще и готовый пример HTML+CSS для вставки шрифта на вебстраницу, а также возможность некоторой оптимизации на этапе конвертации (разложение шрифта, очистка обводов, автокоррекция глифов).
Компания Microsoft предлагает свой инструмент для конвертации шрифтов под названием Web Embedding Fonts Tool (WEFT), который по сообщениям в сети склонен к некорректной конвертации шрифтов и некорректно работе в целом на платформах Win Vista и WIn7. WEFT работает только с TTF. С подробной инструкцией на английском языке Вы можете ознакомиться здесь.
Пользователи Mac могут воспользоваться для этих целей программой FontForge, которая также существует в консольной версии под Win и под Nix системы. Подробное руководство по работе с программой на английском языке от Джонатана Снука (Jonathan Snook) Вы можете посмотреть в его скринкасте Screencast: Converting OTF or TTF to EOT.
К сожалению, процесс конвертации шрифтов содержит свои подводные камни. Лицензии некоторых шрифтов запрещают подобные манипуляции. А кроме того, при конвертации в новом файле шрифтов могут появляться какие-либо артефакты или неточности отображения. Поэтому обязательно проверяйте полученный шрифт.
Перейдем непосредственно к работе со свойством @font-face, подробное описание которого на английском языке Вы найдете в спецификации CSS3.
Итак, объявление нового шрифта на странице осуществляется указанием полного названия шрифта, заключенного в кавычки (двойные или одинарные), поскольку оно может содержать любые символы, включая пробелы и знаки препинания и указание источника с файлом:
@font-face {
font-family: 'Fertigo Pro Regular';
src: url('Fertigo Pro Regular');
}
Как видим ничего сложного. Кроме объявленны параметров, мы можем указать формат загружаемого шрифта, сделать запрос на его наличие в системе у пользователя, а также задачть стилистически параметры отображения. Представляю Вашему вниманию наиболее оптимальный кроссбраузерный код внедрения шрифта на страницу через свойство @font-face, предложенный Полом Айришем (Paul Irish), на примере свободно распространяемого шрифта Fertigo Pro Regular.
@font-face {
font-family: 'Fertigo Pro Regular';
src: url('Fertigo_PRO.eot');
src: local('Fertigo Pro Regular'),
local('FertigoPro-Regular'),
url('Fertigo_PRO.woff') format('woff'),
url('Fertigo_PRO.svg#FertigoPro-Regular') format('svg'),
url('Fertigo_PRO.otf') format('opentype');
}
Эта наиболее компактный вариант, позволяющий не выносить ссылки на разные форматы шрифтов в отдельные блоки кода или помещать EOT-шрифты в Conditional Comments. Кстати, по непонятной пока для меня причине из-за строки №4 Opera 10 отказалась применять шрифт и вывела весь текст единым кеглем и степенью насыщенности. Попробую зарепортить в багтрекер норвежцам.
Рассмотрим его детально. Первым делом мы объявляем семейство шрифтов Fertigo Pro Regular. Затем указываем источник со шрифтом в формате EOT для браузеров IE. Далее мы обращаемся к остальным браузерам с запросом на наличие локально установленного шрифта, если таковой отсутствует, браузеру предлагается его скачать. WOFF мы предлагаем для Firefox 3.6+, SVG для Opera 9.x и iPhone, а OTF для всех остальных браузеров.
Необходимо отметить что все перечисленные шрифты будут скачаны браузером, но использоваться первый из поддерживаемых. Очень важно сохранять оригинальное название файла со шрифтом, каким бы нелепым оно не казалось, т.к. в случае разности имен у установленного шрифта у пользователя и подгружаемого шрифта произойдет загрузка последнего без необходимости.
Затем мы просто указываем Gentium для любого блока нашего документа или всей страницы в целом:
body { font-family: 'Fertigo Pro Regular', Verdana, sans-serif; }
Особенностью подключения шрифта к вебстранице через @font-face является эффект мигания шрифта во время первой загрузки страницы. Это происходит потому, шрифт не успевает за загрузкой всей страницы и текст сначала отображается доли секунды любым доступным шрифтом, а потом переключается на загруженный.
Некоторые гарнитуры поставляются не в одном файле. Например, Droid Sans имеет отдельную полужирную версию в отдельном файле. Подключать ее мы будем следующим образом:
@font-face {
font-family: 'Droid Sans';
src: url('DroidSans.eot');
src: local('Droid Sans'),
local('Droid Sans'),
url('DroidSans.ttf') format('truetype');
}
@font-face {
font-family: 'Droid Sans';
src: local('Droid Sans Bold'),
local('Droid Sans-Bold'),
url('DroidSans-Bold.ttf') format('truetype');
font-weight: bold;
}
Второе правило предназначено только для альтернативных браузеров, т.к. EOT версия Droid Sans включает в себя болдовую версию шрифта. @font-face позволяет указывать до 8-ми различных начертаний шрифта.
Рассмотрим некоторые детали внедренного шрифта Fertigo Pro Regular посредством @font-face. Для теста воспользуемся следующими браузерами (в порядке убывания на изображении): Firefox 3.5, Safari 4.0, Chrome 3.0, Opera 10, IE6, IE7, IE8. Браузеры Firefox, Safari и Opera отображают шрифт OTF, Chrome отображает SVG, а все семейство IE – EOT. Тест рендеринга проводился только на платформе Windows. IE был в каждой из систем браузером по умолчанию.
Пример рендеринга в браузерах внедряемого шрифта
Я могу оценивать рендеринг шрифта лишь поверхностно, т.к. я не являюсь специалистом по типографике. Как можно заметить не вооруженным глазом, Firefox склонен к уменьшать толщину элементов некоторых символов, делать их более округлыми, а также местами грубо без видимого сглаживания отрисовывать края символов. Safari и Opera, на мой взгляд, являются эталоном отображения в рассматриваемом случае. А вот IE несколько портит шрифты, конвертированные из OpenType, изменяя вид и толщину глифов. Плавность линий Safari безусловно обеспечивает включенный ClearType, а вот Opera и без него отлично справилась.
Здесь Вы можете посмотреть пример страницы с внедренными шрифтами, а в конце статьи здесь скачать архив этого примера.
Внедрять шрифты следует с осторожностью, помня о том, что многие из них могут быть достаточно объемными. Вакорин Никита приводит следующие данные в своей статье Внедрение шрифтов — EOT и @font-face:
Например, каждое из четырёх стандартных начертаний (нормальный, полужирный, полужирный курсив, курсив) всем известного шрифт Arial, весит от 500 до 800 килобайт. Если использовать на сайте все 4 стиля начертания, то получится более двух мегабайт. Очень приличный объём. Но это мелочи по сравнению с объёмом шрифта Arial Unicode MS — больше 20 мегабайт!
Как видим объемы данных приличные и с этим необходимо что-то делать. Со слов Никиты, ему удалось достичь компрессии в 2,5 раза при конвертации шрифтов из TTF в EOT, что даже превышает компрессию ZIP, RAR и GZIP! Но опять же этот формат доступен только для семейства браузеров IE.
Другой путь оптимизации это разложение шрифта (font subsetting). С его помощью Вы можете удалить все символы, которые вы не планируете использовать. Например unicode-шрифты могут содержать помимо латиницы кирилицу или даже символы японского письма. Поэтому, знаяя язык и тематику будущего сайта, Вы можете заранее исключить из него все иноязычные или специальные символы. Для этих целей Вы можете использовать программы FontForge или WEFT.
Пример оптимизации разложением от Никиты Воронина:
Оригинал всё того же шрифта arial.ttf (766 килобайт) после разложения на кириллицу с помощью WEFT стал весить 77 килобайт. Разница очевидна.
Еще один пример от Юрия Артюха:
Благодаря удалению только таких символов, файл для шрифта Myriad у меня уменьшился с 96 килобайт, до 40.
У меня же при конвертации шрифта Fertigo Pro Regular с помощью сервиса @font-face Kit Generator результыты компрессии из OTF в EOT, WOFF и SVF получились следующими.
Надо сказать, что у формата WOFF получился отличный старт. Посмотрим, как будет этот формат развиваться в будущем.
Однако, занимаясь разложением шрифтов следует убедиться, что лицензионное соглашение допускает подобные действия.
Спецификация CSS3 также позволяет нам выбрать диапазон используемых символов, например:
@font-face {
font-family: 'Droid Sans';
src: url(DroidSans.ttf);
unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300;
}
Как я понимаю задумка состоит в том, чтобы каким-то образом происходило автоматическое разложение шрифта и новая его компиляция с заданным диапазоном, как это работает во Flex. Спецификация сообщает следующее:
The unicode-range descriptor serves as a hint for user agents when deciding whether or not to download a font resource.
Однако первоисточник не прояснил этот вопрос для меня.
Ну еще одним способом оптимизации является сжатие файла шрифтов в GZIP на сервере перед отправкой браузерe. Об этом очень подробно в своих статьях на английском языке Gzip your @font-face files и @font-face gzipping – take II рассказывает Стоян Стефанов (Stoyan Stefanov).
Сегодня можно смело говорить о том, что долгожданная эра вебшрифтов наступила, т.к. все основные игроки на рынке браузеров выпустили свои продукты с поддержкой свойства @font-face. Думаю, в течение ближайшего года процент браузеров, не поддерживающих это свойство, постепенно сойдет на нет.
Все еще остаются открытыми некоторые вопросы применения шрифтов в сети интернет. В частности, вопрос с единым форматом, на который претендует ветеран EOT и молодой выскочка WOFF. Но это в принципе не является проблемой и препятствием для повсеместного распространения вебшрифтов. Пока же позиция Microsoft выглядит наиболее сильной с учетом поддержки Adobe и Monotype.
Проблема распространенности шрифтов для Веб в свете авторского права остается достаточно серьезной в иду малого количества свободных шрифтов.А цена некоторых коммерческих гарнитур может достигать астрономических сумм и быть сопоставима со стоимостью всех работ по сайту вместе взятых, а то и превышать их. В этой ситуации неплохим, на мой взгляд, решением является предложение от Typotheque.
Также хочу обратить внимание читателя на проект webfonts, который представляет из себя wiki, посвященную вопросам шрифтам в вебе.
Новый комментарий