Веб-шрифты с @ font-face
С первых дней существования сети дизайнеры мечтали создавать сайты с красивой типографикой. Но, как мы все хорошо знаем, браузеры ограничены отображением текста в шрифтах, которые пользователь установил в своей системе. В практическом плане это ограничивает большинство сайтов несколькими шрифтами: Arial, Verdana, Times, Georgia и некоторыми другими.
За прошедшие годы мы придумали ряд умных решений этой проблемы. Мы создали файлы JPEG и PNG для заголовков сайтов, логотипов, кнопок и элементов навигации. Когда для этих элементов требовались дополнительные состояния или варианты, мы создавали еще больше изображений или спрайтов изображений, чтобы страница оставалась быстрой и отзывчивой. Всякий раз, когда дизайн или текст менялись, все эти изображения должны были быть воссозданы.
Это может быть приемлемым решением для некоторых элементов на странице, но просто нереалистично ожидать, что дизайнер нарисует заголовок каждой новой статьи в Photoshop, а затем загрузит его на сайт. Итак, для ключевых элементов страницы, которые должны часто меняться, мы застряли с теми же несколькими шрифтами.
Чтобы заполнить этот типографский пробел, были созданы несколько очень классных скриптов для встраивания шрифтов, таких как sIFR, на основе Flash и JavaScript, и Cufón на основе холста. Хотя эти методы были отличной временной мерой, позволяющей нам включать наши собственные шрифты, они имели серьезные недостатки. Иногда их было сложно реализовать, и они требовали, чтобы JavaScript был включен и, в случае sIFR, был установлен плагин Flash. Кроме того, они значительно замедлили загрузку и рендеринг страницы.
К счастью, теперь есть лучший способ: @font-face — это чистое CSS-решение для встраивания шрифтов, и оно поддерживается во всех браузерах с любой долей рынка, начиная с IE6 и выше.
Реализация @ font-face
@font-face — это одно из нескольких правил CSS, таких как @media , @import , @page , и то, которое мы только что видели, @keyframes . At-rules — это способы объединения нескольких правил в объявлении, которые служат инструкциями для CSS-процессора браузера. @font-face at-rule позволяет нам указывать пользовательские шрифты, которые мы можем затем включить в другие блоки объявления.
Чтобы включить шрифты с помощью @font-face , вам необходимо:
- загрузите файл шрифтов на свои серверы в различных форматах для поддержки всех различных браузеров
- имя, описание и ссылка на этот шрифт в правиле
@font-face - включите имя
font-familyзначение свойстваfont-familyже, как для системных шрифтов
Вы уже знаете, как загрузить файл на сервер, поэтому мы обсудим детали различных типов файлов в следующем разделе. Сейчас мы сосредоточимся на втором и третьем шагах, чтобы вы могли ознакомиться с синтаксисом @font-face .
Вот пример блока @font-face :
@font-face { font-family: 'fontName'; src: source; font-weight: weight; font-style: style; }
Требуется семейство шрифтов и источник, но вес и стиль не обязательны.
Вам необходимо включить отдельное правило @font-face для каждого шрифта, содержащегося на вашем сайте. Вам также нужно будет включить отдельное правило для каждого варианта шрифта — обычный, тонкий, толстый, курсив, черный и т. Д.
Часть font-family в объявлении @font-face at-rule немного отличается от свойства font-family с которым вы уже знакомы. В этом случае мы объявляем имя для нашего шрифта, а не назначаем шрифт с заданным именем для элемента. Имя шрифта может быть любым, какое угодно — это только ссылка на файл шрифта, поэтому оно не должно даже соответствовать названию шрифта. Конечно, имеет смысл использовать имя шрифта, чтобы сделать ваш CSS читабельным и понятным. Хорошо договориться и придерживаться всех шрифтов.
@font-face { font-family: 'LeagueGothic'; } @font-face { font-family: 'AcknowledgementMedium'; }
Объявление источников шрифта
Теперь, когда у нас есть скелет для наших правил @font-face , и мы дали каждому из них имя, пришло время связать их с реальными файлами шрифтов. Свойство src может принимать несколько форматов. Кроме того, вы можете объявить более одного источника. Если браузер не может найти первый источник, он будет пытаться найти следующий и т. Д., Пока не найдет источник или не закончатся параметры.
Давайте добавим больше форматов к нашей декларации Лиги Готики:
@font-face { font-family: 'LeagueGothicRegular'; src: url('../fonts/League_Gothic-webfont.eot') format('eot'), url('../fonts/League_Gothic-webfont.woff') format('woff'), url('../fonts/League_Gothic-webfont.ttf') format('truetype'), url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg'); }
В приведенном выше блоке кода перечислены четыре источника шрифтов. Первое объявление — это объявление шрифта EOT, собственный формат для Internet Explorer и единственный тип файла, понятный в IE4–8.
Затем мы определяем файлы шрифтов WOFF (Web Open Font Format, новый стандарт), OTF (OpenType), TTF (TrueType) и SVG (Scalable Vector Graphics). Хотя большинство настольных браузеров будут использовать одно из первых трех объявлений, обязательно включите формат SVG, который изначально был единственным форматом, поддерживаемым iPhone.
Добавление этих дополнительных форматов шрифтов обеспечивает поддержку для каждого браузера, но, к сожалению, это вызовет проблемы в версиях IE, более старых, чем IE9. Эти браузеры будут видеть все между первым url(' и последним ') как один URL, поэтому не смогут загрузить шрифт. Поначалу может показаться, что у нас есть выбор между поддержкой IE и поддержкой любого другого браузера, но, к счастью, есть решение. Подробно в сообщении в блоге FontSpring , он включает добавление строки запроса в конец URL EOT. Это заставляет браузер думать, что остальная часть свойства src является продолжением этой строки запроса, поэтому он ищет правильный URL и загружает шрифт:
@font-face { font-family: 'LeagueGothicRegular'; src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('eot'), url('../fonts/League_Gothic-webfont.woff') format('woff'), url('../fonts/League_Gothic-webfont.ttf') format('truetype'), url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg'); }
Этот синтаксис имеет одну потенциальную точку отказа: IE9 имеет функцию, называемую режимом совместимости , в которой он будет пытаться отображать страницы так же, как IE7 или 8. Это было введено для предотвращения появления более старых сайтов в более совместимом с IE9 рендеринге. Однако IE9 в режиме совместимости не воспроизводит ошибку при загрузке шрифта EOT, поэтому приведенное выше объявление не будет выполнено. Чтобы компенсировать это, вы можете добавить дополнительный URL-адрес EOT в отдельном свойстве src :
@font-face { font-family: 'LeagueGothicRegular'; src: url('../fonts/League_Gothic-webfont.eot'); src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('eot'), url('../fonts/League_Gothic-webfont.woff') format('woff'), url('../fonts/League_Gothic-webfont.ttf') format('truetype'), url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg'); }
Это может быть ненужной мерой предосторожности, так как обычно пользователю необходимо сознательно переключать IE в режим совместимости при просмотре вашего сайта для возникновения этой проблемы. В качестве альтернативы вы также можете вывести IE из режима совместимости, добавив этот meta в заголовок документа:
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
Также можно добиться того же результата, добавив дополнительный заголовок HTTP; это можно сделать с помощью директивы в вашем файле .htaccess (или эквивалентном):
<IfModule mod_setenvif.c> <IfModule mod_headers.c> BrowserMatch MSIE ie Header set X-UA-Compatible "IE=Edge" </IfModule> </IfModule>
Дескрипторы свойств шрифта
Дескрипторы свойств font-style том числе font-style , font-variant , font-weight и другие, могут быть добавлены по желанию для определения характеристик шрифта и используются для сопоставления стилей с конкретными гранями шрифта. Значения совпадают с эквивалентными свойствами CSS:
@font-face { font-family: 'LeagueGothicRegular'; src: url('../fonts/League_Gothic-webfont.eot'); src: url('../fonts/League_Gothic-webfont.eot?#iefix')format('eot'), url('../fonts/League_Gothic-webfont.woff') format('woff'), url('../fonts/League_Gothic-webfont.ttf') format('truetype'), url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg'); font-weight: bold; font-style: normal; }
Опять же, поведение отличается от того, что вы ожидаете. Вы не говорите браузеру сделать шрифт жирным; скорее, вы говорите, что это жирный вариант шрифта. Это может сбивать с толку, а поведение может быть странным в некоторых браузерах.
Однако есть причина использовать дескриптор font-weight или font-style в объявлении правила @font-face . Вы можете объявить несколько источников шрифта для одного и того же имени font-family :
@font-face { font-family: 'CoolFont'; font-style: normal; src: url(fonts/CoolFontStd.ttf); } @font-face { font-family: 'CoolFont'; font-style: italic; src: url(fonts/CoolFontItalic.ttf); } .whichFont { font-family: 'CoolFont'; }
Обратите внимание, что оба at-правила используют одно и то же имя семейства шрифтов, но разные стили шрифтов. В этом примере элемент .whichFont будет использовать шрифт CoolFontStd.ttf, поскольку он соответствует стилю, указанному в этом правиле. Однако, если элемент должен наследовать стиль шрифта курсивом, он переключился бы на использование шрифта CoolFontItalic.ttf.
Диапазон Юникода
Также доступен дескриптор диапазона Юникода, который используется для определения диапазона символов Юникода, поддерживаемых шрифтом. Если это свойство не указано, будет доступен весь диапазон символов, включенных в файл шрифта.
Мы не будем использовать это на нашем сайте, но вот пример того, как это выглядит:
unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;
Применение шрифта
Как только шрифт объявлен с использованием синтаксиса @font-face , вы можете ссылаться на него так же, как на любой обычный системный шрифт в вашем CSS: включить его в «стек» в качестве значения свойства font-family . Это хорошая идея, чтобы объявить запасной шрифт или два, если ваш встроенный шрифт не загружается.
h1 { text-shadow: #fff 1px 1px; font-family: LeagueGothic, Tahoma, Geneva, sans-serif; text-transform: uppercase; line-height: 1; }
Наши два встроенных шрифта используются в разных местах нашей таблицы стилей, но вы поняли идею.
Устранение неполадок @ font-face
Если ваши шрифты не отображаются в любом браузере, проблема может заключаться в пути в вашем CSS. Убедитесь, что файл шрифта находится там, где вы ожидаете. Инструменты отладки на основе браузера — такие как Web Inspector в WebKit, Dragonfly в Opera или расширение Firebug Firefox — укажут, отсутствует ли файл.
Если вы уверены, что путь правильный и файл находится там, где он должен быть, убедитесь, что ваш сервер правильно настроен для обслуживания шрифтов. Серверы Windows IIS не будут обслуживать файлы, если они не смогут распознать свой тип MIME, поэтому попробуйте добавить WOFF и SVG в список типов MIME (EOT и TTF должны поддерживаться «из коробки»):
.woff application/x-font-woff .svg image/svg+xml
Наконец, некоторые браузеры требуют, чтобы файлы шрифтов обслуживались из того же домена, что и страница, на которую они встроены.
Это отрывок из HTML5 и CSS3 для реального мира , автор Алексис Гольдштейн, Луи Лазарис и Эстель Вейль.