Правило @font-face
Каждый веб-дизайнер мечтает о создании сайта с красивой типографикой. Но к сожалению, браузеры поддерживают лишь несколько гарнитур, так называемых «безопасных для веб» шрифтов. В стандартный набор входят следующие шрифты: Arial, Verdana, Times, Georgia, Courier New и несколько других.
Гарнитура определяет набор из одного или более шрифтов, каждый из которых состоит из символов, имеющих общие конструктивные особенности — вес, стиль, дизайн, начертание, плотность, размер, например, шрифты без засечек (или гротески), шрифты с засечками (антиква). Гарнитура состоит из набора знаков (цифры, буквы, знаки пунктуации, специальные символы, также может состоять из неалфавитных символов).
Шрифт — это набор символов конкретного размера, веса и стиля. Например, шрифт Times New Roman стиль italic размера 16px — это один шрифт, а Times New Roman стиль italic размера 10px — это уже другой.
Правило @font-face позволяет подключать разнообразные пользовательские шрифты. Браузер загружает шрифты в кэш и использует их для оформления текста на странице. Такой подход называется встраиванием шрифтов, а встроенные шрифты — веб-шрифтами.
Правило @font-face нужно размещать перед всеми остальными правилами css, так как этот прием улучшит производительность страницы. Загружаемые шрифты можно помещать в специальную папку fonts , созданную на сервере.
Чтобы подключить шрифт с помощью правила @font-face , нужно:
- загрузить файл шрифта на сервер в нескольких форматах для поддержки всеми браузерами,
- указать название шрифта, прописать ссылку на файл и задать описание шрифта,
- добавить имя шрифта в свойство font-family элемента, который будет отображаться данным шрифтом.
@font-face < font-family: "WebFont"; src: url(WebFont.eot?) format("eot"), /* IE8+, знак ? позволяет обойти баг в обработчике значения src */ url(WebFont.woff) format("woff"), /* все современные браузеры, IE9+ */ url(WebFont.ttf) format("truetype"); /* все современные браузеры */ >p
Этот код говорит браузеру отображать текст внутри элемента
, используя шрифт WebFont. Если браузер по какой-либо причине не сможет загрузить данный шрифт, он выберет подходящий из списка шрифтов. Он перебирает их в указанном порядке до тех пор, пока не находит шрифт, который сможет успешно использовать.
Внутри каждого семейства шрифта можно определить до девяти значений жирности (веса). Поэтому для каждого встраиваемого шрифта, а также для каждого начертания нужно задавать отдельное правило @font-face , т.е. нельзя объявить в одном правиле два разных шрифта или шрифт одного семейства, но разных стилей и веса.
@font-face
@font-face
В общем виде для шрифта можно задать следующие свойства:
@font-face
Если вы предполагаете, что на компьютере пользователя установлен данный шрифт и хотите, чтобы шрифт загружался только после проверки его наличия у пользователя, то можно воспользоваться значением local() для задания адреса:
@font-face
Форматы веб-шрифтов
Свойство @font-face имеет хорошую поддержку в браузерах, но разные браузеры используют разные форматы шрифтов. Существуют четыре основных формата шрифтов:
- Формат WOFF (Web Open Font Format), открытый сетевой формат шрифта, разработанный в Mozilla. Технически WOFF нельзя назвать форматом шрифта, так как он представляет собой лишь оболочку с функцией сжатия. Формат сжимает шрифты в формате TTF/OTF для использования их в интернете. Также, WOFF позволяет добавлять к файлу метаданные, например, сведения о лицензии.
- Форматы OTF/TTF (OpenType Font и TrueType Font) работают в большинстве браузеров. Оба формата распространяются свободно.
- Формат EOT (Embedded Open Type) создан разработчиками Microsoft, представляет сжатую копию шрифта TTF, повторное использование которого запрещается технологиями DRM (Digital Rights Management, цифровое управление правами доступа). Поддерживается только в IE, начиная с 8-й версии.
- SVG/SVGZ (Scalabe Vector Graphics) — тип файлов шрифтов, представляющий векторное начертание шрифта. Как правило, имеет меньшие размеры файлов, тем самым позволяя улучшить производительность на мобильных устройствах. Работает в Opera Mobile и iOS Safari.
Сложности использования встроенных шрифтов
- Файлы шрифтов могут быть больших размеров, поэтому в некоторых случаях добавление @font-face замедляет загрузку страниц.
- С некоторыми шрифтами связаны лицензионные ограничения, не допускающие бесплатного использования.
- Некоторые шрифты просто плохо смотрятся на веб-страницах.
Полезные ресурсы
Font Squirrel — сервис, позволяющий конвертировать веб-шрифты разных форматов. Небольшой минус — высота некоторых символов после конвертации может различаться. Шрифт загружается на сервис по кнопке Upload Fonts.
Webfont.ru — ресурс, содержащий коллекцию бесплатных шрифтов для сайтов. На сайте также есть форум, где можно задавать вопросы, касающиеся использования того или иного шрифта. В закладке «Полигон» вы сможете увидеть, как будет выглядеть текст, поиграв с размерами, задав для него тень и т.д.
Transfonter — быстрый и удобный генератор правила @font-face для веб-шрифтов.
Решение проблем c @font-face в медиазапросах
Соединение с интернетом на мобильных устройствах по качеству часто уступает соединению на настольных компьютерах, следовательно загрузка подключённых шрифтов может затянуться на несколько секунд. Предотвратить это можно используя правило @font-face только для ряда устройств c определенным размером экрана используя медиазапросы. К сожалению, такой подход не работает в некоторых браузерах, включая все версии Internet Explorer и Firefox старше 10 версии. В этой статье вы найдете решение проблемы, которое позволяет достичь баланса между использованием хаков и производительностью.
В чём суть проблемы?
Начав работу над новым сайтом, я хотел чтобы он был хорошо оптимизирован под мобильные устройства без ущерба для производительности. Одна из главных проблем, которых мне хотелось избежать — это явление, которое часто можно встретить просматривая веб-сайты на смартфоне: блок пустого пространства там, где должен быть контент. Причина этого — применение подключённого шрифта к тексту, который не загрузился полностью. Это явление продемонстрировано на изображении ниже.
Итак, как это можно исправить? Как уже было упомянуто в предисловии, лучше всего подключить нужный шрифт через правило @font-face только для определённого ряда устройств и экранов с помощью медиазапросов. Вы можете предположить что лучшим решением будет отображать подключённый шрифт только для пользователей с быстрым подключением к интернету и вы будете абсолютно правы. К сожалению пока такой возможности нет, хотя она уже несколько раз выносилась на обсуждение в списки рассылки WHATWG.
@font-face в медиазапросе
Для простоты, создадим два файла: index.html и style.css. Первый — это образец страницы с текстом, к которому применён подключённый шрифт, второй содержит стили для этой страницы.
Наша гипотетическая страница index.html может выглядеть так:
html> head> link rel="stylesheet" href="style.css" /> head> body> p> Это безумно красивый текст, оформленный подключённым шрифтом. p> body> html> Как видите, это очень простая страница с одним текстовым абзацем и ссылкой на таблицу стилей.
Дальше вы видите код нашего гипотетического файла style.css, для которого использован подход «сначала мобильные»:
p < font-family: Arial,Helvetica,sans-serif; > @media only screen and (min-width: 980px) < @font-face < font-family: "OctinSports"; src: url("fonts/octinsports.eot"); src: url("fonts/octinsports.eot?#iefix") format("embedded-opentype"), url("fonts/octinsports.woff") format("woff"), url("fonts/octinsports.ttf") format("truetype"), url("fonts/octinsports.svg#OctinSports") format("svg"); font-weight: normal; font-style: normal; > p < font-family: "OctinSports"; > > Согласно таблице стилей, для всех абзацев должен применяться шрифт Arial, с некоторыми исключениями. Используемый стек шрифтов состоит из популярных шрифтов, встроенных в большинство крупных операционных систем. В общем то, согласно статистике CSSFontStack, шрифт Arial присутствует на 99.84% устройствах с Windows и 98.74% устройствах на Mac. На случай если ни один из перечисленных шрифтов не доступен, в CSS указано общее семейство шрифтов без засечек.
Во второй части style.css описан медиазапрос. Он предназначен для всех устройств с шириной экрана не менее 980px (можно использовать и другую контрольную точку). В этот медиазапрос мы помещаем правило @font-face, которое будет загружать подключённый шрифт, используя устойчивый к ошибкам синтаксис @font-face от Fontspring. Затем мы просто применяем новый шрифт для всех абзацев, заменяя прописанный ранее стиль.
Поддержка браузерами
На первый взгляд это решение кажется отличным, так как позволяет применять подключённый шрифт только для пользователей с большим экраном, которые теоретически не должны столкнуться с проблемой недостаточной пропускной способности. Однако, к сожалению, оно не поддерживается Internet Explorer 10 и старше, а также Firefox 10 и старше. Вам такое поведение может показаться странным, однако на самом деле оно продиктовано спецификацией CSS 2.1, согласно которой @-правила внутри медиазапросов не работают.
Хотя и последняя версии Internet Explorer всё еще не поддерживает такое применение @-правил, компания-разработчик Firefox, Mozilla, добавила его поддержку в версиях после 10. Таким образом, по большому счёту проблема касается только Internet Explorer. Также следует помнить что Internet Explorer 8 и старше не понимают медиазапросы, так что даже если в новых версиях ситуация изменится, проблемы со старыми никуда не денутся.
Как частично решить проблему
Есть ли способ решить проблему поддержки браузером Internet Explorer правил @font-face внутри медиазапросов? Ответ: да, частично.
Как я упомянул в предисловии, с этой проблемой я столкнулся в процессе разработки моего сайта. Мне не было известно о проблеме совместимости с Internet Explorer, так что как и любой добросовестный веб-разработчик я первым делом обратился к Google. Проводя расследование, я наткнулся на статью «Не помещайте @font-face в медиазапрос», из которой я узнал в чём причина проблемы, но не узнал как её решить. Так как найти готовое решение я не смог, пришлось придумать его самостоятельно.
Избавляемся от проблемы в Internet Explorer 9 и старше
Из того, что уже было сказано, получается что проблема состоит только в Internet Explorer, так что можно сосредоточиться на поиске решения, которое будет подходить только для этого браузера. Первым на ум приходит создать отдельный файл CSS, например fonts.css, с всеми правилами @font-face без медиазапросов и использовать условный комментарий. Итак, содержимое fonts.css будет выглядеть так:
@font-face < font-family: "OctinSports"; src: url("fonts/octinsports.eot"); src: url("fonts/octinsports.eot?#iefix") format("embedded-opentype"), url("fonts/octinsports.woff") format("woff"), url("fonts/octinsports.ttf") format("truetype"), url("fonts/octinsports.svg#OctinSports") format("svg"); font-weight: normal; font-style: normal; > Этот подход даёт нам преимущество: для всех браузеров кроме Internet Explorer вес страницы остаётся прежним, если не считать нескольких байтов добавленных условным комментарием. Для IE затраты на загрузку страницы увеличатся вследствие добавления дополнительной таблицы стилей. Так как она содержит всего несколько строчек правила @font-face , после сжатия средний размер файла должен стать всего лишь на 1-2Кб больше. В большинстве случаев это приемлемый компромисс.
Вот сжатая версия кода для реализации этого подхода:
Это простое решение, но его нельзя считать исчерпывающим, ведь, как вам наверное известно, Internet Explorer 10 не поддерживает условные комментарии, так что он наш код с условным комментарием просто проигнорирует. Проблема еще не решена.
Решение для проблемы с Internet Explorer 10
Для Internet Explorer 10 мы используем менее изящный подход, нам придётся применить хак. Если точнее, мы будем использовать хак построенный на JavaScript; он описан в статье CSS-хаки для IE10. Он определяет что используется IE10 и проверяет является ли ширина окна браузера равной или большей 980px. Если эти условия соблюдены, в элемент страницы добавляется всё та же таблица стилей fonts.min.css. Помните что поскольку хак работает благодаря JavaScript, он, само собой, не будет работать если JavaScript отключён.
