Уголок CSS: Лучшая веб-типографика для лучшего дизайна
Потери при переводе
«Веб-дизайн – это на 95% разметка текста». Именно столько в содержимом веб-страниц занимает текст, а дизайнеры и пользователи все еще ограничены набором совместимых шрифтов, доступных в клиентской операционной системе. Чтобы покинуть этот шрифтовой остров привлекаются все средства от обходных путей межбраузерных CSS, графических решений и даже плагинов. Цена таких компромиссов простирается от затрат дополнительной памяти и полосы пропускания до уменьшения доступности.
В итоге, тип шрифта очень часто являлся первой потерей при перемещении дизайна макета из Photoshop на живую веб-страницу.
Не тот же самый CSS
Решение данной задачи требует для описания ресурсов шрифта интероперабельного CSS-синтаксиса. Несмотря на то, что в IE еще в 1997 году была добавлена поддержка инструкции CSS2 @font-face, различия между этой самой ранней реализацией и более поздними версиями, поддерживающими шрифты CSS3 дали начало созданию модели CSS, обеспечивающей единый набор правил для всех пользователей. Важнейший пример – синтаксис bulletproof @font-face, разработанный Паулом Ириш (Paul Irish) из Google и др.
Но создание кросс-браузерной декларации @font-face оказывается только половиной проблемы.
Отсутствует общий формат веб-шрифтов
Реализация декларации @font-face в Internet Explorer поддерживает шрифты формата EOT (встроенные шрифты OpenType – сжатое кодирование шрифта), представленного на рассмотрение W3C в 2008 году. Следуя примеру 2007-го года проекта WebKit, Mozilla и Opera добавили поддержку для необработанных (raw) шрифтов TrueType и OpenType. Необработанные шрифты хорошо работают, если есть лицензия (EULA), позволяющая предоставлять их с веб-сервера. Хотя это справедливо для многих бесплатных шрифтов, но это не так для подавляющего большинства коммерческих шрифтов. Авторы веб-страниц фактически удаляют дорогие шрифты из доступных перечней. Если они выбирают EOT, они могут лицензировать ряд коммерческих шрифтов, но только IE воспроизводит их.
Это ставит трудную задачу перед индустрией. Основные браузеры поддерживают два несовместимых решения и лицензии коммерческих шрифтов EULA в основном несовместимы с одним из них. Это породило специальные сервисы, подобные TypeKit, чтобы помочь дизайнерам лицензировать шрифты для их сайтов и использовать в браузерах. Однако данный сервис может не предлагаться для всех или даже для одного любого из шрифтов, которые необходимы разработчику веб-страниц. В некоторых случаях набор шрифтов требует множества подписок.
WOFF
В конце 2009 года художники шрифтов Тал Леминг (Tal Leming) и Эрик ван Блокланд (Erik van Blokland), работая совместно с Джонатоном Кью (Jonathan Kew) из Mozilla, предложили новый формат контейнера веб-шрифтов, удовлетворяющий интересам разработчиков шрифтов и не сужающий выбора создателям веб-страниц. Он был хорошо принят в сообществе и представлен на рассмотрение W3C в апреле 2010 компаниями Mozilla, Opera и Microsoft. Сегодня Mozilla Firefox 3.6 поддерживает WOFF и другие производители браузеров вскоре последуют за ним.
Шрифтовые мастерские также объединились вокруг нового формата и тоже предлагают WOFF-кодированные шрифты для использования в вебе. Среди них Monotype Imaging, Ascender Corporation, FontShop и Typotheque, которые обеспечили нас замечательными WOFF-шрифтами для наших демонстраций на Testdrive.
Одинаковый CSS, одинаковый формат веб-шрифтов
Начиная с Platform Preview 3, реализация директивы @font-face браузера IE9 соответствует модулю CSS3 Fonts, поддерживающему форматы шрифтов, включая EOT и WOFF, а также необработанные шрифты со встроенными разрешениями на инсталляцию.
В дальнейшем, мы рассмотрим поддержку шрифтов в IE9 более детально, вместе со способами кросс-браузерной типографики. В своем последнем сообщении на FontBlog Грег Хитчкок (Greg Hitchcock) предложил интересную среду для творчества и науки посредством технологий внедренных в веб-типографику.
Мы ожидаем ваши отзывы на выпуск этой версии, а также постоянно работаем с W3C для расширения веб-типографики.
Сильвайн Галинеу (Sylvain Galineau)