@font-faceПравило позволяет пользовательские шрифты должны быть загружены на веб - странице. После добавления в таблицу стилей правило указывает браузеру загрузить шрифт с того места, где он размещен, а затем отобразить его, как указано в CSS.
Без правила наши дизайны ограничиваются шрифтами, которые уже загружены на компьютер пользователя, которые различаются в зависимости от используемой системы. Вот хорошая разбивка существующих системных шрифтов.
Максимально возможная поддержка браузера
Это метод, который сейчас пользуется глубочайшей поддержкой. @font-faceПравило должно быть добавлено к таблице стилей перед любыми стилями.
@font-face ( font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ )Затем используйте его для стилизации таких элементов:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Практический уровень поддержки браузера
Все сильно меняется в сторону WOFF и WOFF 2, так что нам, вероятно, сойдет с рук:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5.1+ | 3.6+ | 11,50+ | 9+ | 4.4+ | 5.1+ |
Немного более глубокая поддержка браузера
Если вам нужна золотая середина между полной поддержкой и практической поддержкой, это касается еще нескольких основ:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); )| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 3.5+ | 3+ | 3.5+ | 10.1+ | 9+ | 2.2+ | 4.3+ |
Поддержка суперпрогрессивного браузера
Если мы делаем ставку на WOFF, мы можем ожидать, что в какой-то момент все перейдет в сторону WOFF2. Это означает, что мы можем жить на передовой с:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Нет | 35+ с флагом | 23+ | Нет | 37 | Нет |
Альтернативные методы
@import
Хотя @font-faceон отлично подходит для шрифтов, размещенных на наших собственных серверах, могут быть ситуации, когда решение для размещенных шрифтов лучше. Google Fonts предлагает это как способ использования своих шрифтов. Ниже приведен пример использования @importдля загрузки шрифта Open Sans из Google Fonts:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Затем мы можем использовать его для стилизации элементов:
body ( font-family: 'Open Sans', sans-serif; )Если вы откроете URL-адрес шрифта, вы действительно сможете увидеть всю @font-faceработу, которая выполняется за кулисами.
Преимущество использования размещенной службы заключается в том, что она может включать все варианты файлов шрифтов, что обеспечивает глубокую кроссбраузерную совместимость без необходимости размещать все эти файлы самостоятельно.
См. Раздел Использование пера @import для пользовательских шрифтов от CSS-Tricks (@ css-tricks) на CodePen.
создание таблицы стилей
Точно так же вы можете связать тот же актив, что и любой другой файл CSS, в документе HTML, а не в CSS. Используя тот же пример из Google Fonts, мы бы использовали следующее:
Затем мы можем стилизовать наши элементы, как и другие методы:
body ( font-family: 'Open Sans', sans-serif; )Опять же, это импорт @font-faceправил, но вместо того, чтобы внедрять их в нашу таблицу стилей, они добавляются в наш HTML .
См. Раздел Использование пера для пользовательских шрифтов от CSS-Tricks (@ css-tricks) на CodePen.
Это примерно одно и то же… оба метода загружают необходимые ресурсы.
Общие сведения о типах файлов шрифтов
Исходный фрагмент в верхней части этого сообщения ссылается на множество файлов со странными расширениями. Давайте пройдемся по каждому из них и лучше поймем, что они означают.
WOFF / WOFF2
Расшифровывается как: Формат открытого веб-шрифта.
Шрифты WOFF, созданные для использования в Интернете и разработанные Mozilla совместно с другими организациями, часто загружаются быстрее, чем другие форматы, поскольку они используют сжатую версию структуры, используемой шрифтами OpenType (OTF) и TrueType (TTF). Этот формат также может включать метаданные и информацию о лицензии в файл шрифта. Этот формат кажется победителем, и в нем идут все браузеры.
WOFF2 - это следующее поколение WOFF, которое может похвастаться лучшим сжатием, чем оригинал.
SVG / SVGZ
Означает: масштабируемая векторная графика (шрифт)
SVG - это векторное воссоздание шрифта, которое делает его намного легче по размеру файла, а также делает его идеальным для мобильного использования. Этот формат является единственным, допустимым в Safari для iOS версии 4.1 и ниже. Шрифты SVG в настоящее время не поддерживаются Firefox, IE или IE Mobile. Firefox отложил реализацию на неопределенный срок, чтобы сосредоточиться на WOFF.
SVGZ - это заархивированная версия SVG.
EOT
Означает: встроенный открытый тип.
Этот формат был создан Microsoft (первыми изобретателями @font-face) и является проприетарным файловым стандартом, поддерживаемым только IE. Фактически, это единственный формат, который IE8 и ниже распознает при использовании @font-face.
OTF / TTF
Означает: шрифт OpenType и шрифт TrueType.
Формат WOFF изначально был создан как реакция на OTF и TTF, отчасти потому, что эти форматы можно было легко (и незаконно) скопировать, однако OpenType имеет возможности, которые могут быть интересны многим дизайнерам (лигатуры и т. Д.).
Примечание о производительности
Веб-шрифты отлично подходят для дизайна, но важно также понимать их влияние на производительность в Интернете. Пользовательские шрифты часто приводят к снижению производительности сайтов, потому что шрифт необходимо загрузить, прежде чем он будет отображаться.
Распространенным симптомом был короткий момент, когда шрифты сначала загружались как резервные, а затем мигали на загруженный шрифт. У Пола Айриша есть более старая запись по этому поводу (названная «FOUT»: Flash Of Unstyled Text).
В наши дни браузеры обычно скрывают текст до того, как загрузится пользовательский шрифт по умолчанию. Лучше или хуже? Вам решать. Вы можете контролировать это с помощью различных методов. Это немного выходит за рамки этой статьи, но вот три статьи Зака Лезермана, которые помогут вам начать поиски кроличьей норы:
- Лучше @ font-face с событиями загрузки шрифта
- Как мы ответственно используем веб-шрифты или избегаем @ font-face-palm
- Вспышка искусственного текста - еще больше о загрузке шрифтов
Вот еще несколько соображений при реализации пользовательских шрифтов:
Следите за размером файла
Шрифты могут быть на удивление тяжелыми, поэтому склоняйтесь к вариантам, которые предлагают более легкие версии. Например, отдайте предпочтение шрифту размером 50 КБ по сравнению с набором шрифтов размером 400 КБ.
Если возможно, ограничьте набор символов
Вам действительно нужны жирный и черный жирность для одного шрифта? Ограничение наборов шрифтов загрузкой только того, что используется, - хорошая идея, и здесь есть несколько хороших советов по этому поводу.
Рассмотрите системные шрифты для маленьких экранов
Многие устройства зависают от плохих соединений. Одна из уловок может заключаться в нацеливании на большие экраны при загрузке пользовательского шрифта с использованием @media.
В этом примере для экранов меньше 1000 пикселей будет использоваться системный шрифт, а для экранов такой ширины и выше будет использоваться пользовательский шрифт.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Услуги шрифтов
Существует ряд служб, которые будут размещать шрифты и предоставлять доступ к коммерчески лицензированным шрифтам. Преимущества использования сервиса часто сводятся к тому, что большой выбор легальных шрифтов предоставляется эффективно (например, их обслуживание в быстрой CDN).
Вот несколько размещенных служб шрифтов:
- Облачная Типография
- Typekit
- Fontdeck
- Webtype
- Fontspring
- Типотека
- Fonts.com
- Google шрифты
- Шрифт Белка
А как насчет иконочных шрифтов?
Это правда, @ font-face может загружать файл шрифта, полный значков, которые можно использовать для системы значков. Однако я думаю, что вам гораздо лучше использовать SVG в качестве системы значков. Вот сравнение двух методов.
Дополнительные ресурсы
- Основы Google Font API
- Семейства шрифтов CSS