Как использовать веб-шрифты

Sep 13, 2025

Инструкции

Ниже приведен выдержка, взятый из WebFont Bram Stein's WebFont. Купить это здесь Отказ

Веб-шрифты определены в CSS через @ font-face правило Если вы веб-разработчик, вы, скорее всего, написаны, скопированы и вставлены или по крайней мере, видели @ font-face правило

Для полноты, однако, давайте быстро пройдемся через основной пример:

 @ font-face {
  Семья шрифтов: Елена;
  SRC: URL (Elena-Regular.woff);
}

Это создает новую семью веб-шрифта, которые могут быть ссылаются через семейство шрифтов или же шрифт Соррючая собственность. Но что-то здесь не хватает. При обращении о веб-шрифте в стеке шрифта, всегда проверяйте, по крайней мере, один защитный шрифт в случае не удается загрузить веб-шрифт.

Здесь, если ELENA не загружает, браузер вернет обзорный серифы семейство шрифтов:

 P {
  Семья шрифтов: Елена, Serif;
}

Есть больше для защиты шрифтов, но на данный момент давайте сохраним наш стек шрифта простым, включая только общий серифы и без засечек Семьи шрифтов.

Семьи шрифтов

Создание семьи шрифта с несколькими стилями осуществляется путем создания @ font-face правило для каждого стиля и используя то же самое семейство шрифтов имя. Следующее @ font-face Правила создают семью с нормальным и смелым стилем:

 @ font-face {
     Семья шрифтов: Елена;
     SRC: URL (Elena-Regular.woff);
     Вес шрифта: нормальный;
}
   @ font-face {
     Семья шрифтов: Елена;
     SRC: URL (ELENA-BOLD.WOFF);
     Вес шрифта: смелый;
}

Вы можете использовать эту семью шрифта в ваших CSS, ссылаясь на имя семьи и весом в ваших селекторах. Это применяет обычный стиль к пунктам и смелому стилю для сильный абзацы:

 P {
  Семья шрифтов: Елена, Serif;
}

p сильный {
  Вес шрифта: смелый;
}

Помимо вес шрифта , @ font-face также принимает стиль шрифта и шрифт-растяжение Дескрипторы свойств, которые определяют такие стили, как курсив и конденсированные. Все три дескриптора свойств могут использоваться для создания одной семьи шрифта с несколькими стилями. Теоретически это позволяет создать семью, содержащую 243 отдельных стилей (девять вес шрифта Значения × три стиль шрифта Значения × девять шрифт-растяжение значения).

На практике, однако, вы ограничены 27 ценностями, поскольку некоторые браузеры не поддерживают шрифт-растяжение Отказ Посмотрите на таблицу ниже, чтобы увидеть, какие браузеры вы можете использовать и посмотреть здесь Для получения более подробной информации.

Click the icon in the top right to enlarge the image — Нажмите на значок в правом верхнем углу, чтобы увеличить изображение

С удачей оставшиеся браузеры будут реализовывать шрифт-растяжение Недвижимость в ближайшее время, и вы сможете использовать все 243 классификации шрифтов.

Форматы шрифтов

То сортировка Дескриптор сообщает браузеру, где получить файл шрифта. Предыдущие примеры использовали формат одного шрифта, но вы часто видите URL-адреса для нескольких форматов шрифтов, в сочетании с подсказками формата, которые добавлены после URL-адреса с помощью Формат («значение») синтаксис.

Формат подсказки Скажите браузеру, какой формат файла шрифта на данном URL есть.

 @ font-face {
  Семья шрифтов: Елена;
  SRC: формат URL (Elena-Regular.woff2) («WOFF2»),
       формат URL (Elena-Regular.woff) («WOFF»);
}

Если вы перечислите несколько форматов, современные браузеры выберут первый формат, который они поддерживают на основе подсказки формата. Следовательно, важно перечислить форматы веб-шрифта в порядке лучшего сжатия до минимум.

Несмотря на то, что подсказки от формата являются необязательными, всегда включают их - они позволяют браузеру знать о формате, не требуя загрузки шрифта. Например, если браузер не поддерживает WOFF2, но поддерживает WOFF, он может пропустить файл font woff2 на основе подсказки формата.

Браузеры поддерживают несколько форматов веб-шрифта: OPENTYPE (TRUETYPE), EOT, WOFF и WOFF2. Некоторые браузеры также поддерживают шрифты SVG, но они устарели и больше не должны использоваться (и не следует путать с Новый формат OPENTYPE-SVG ).

EOT, WOFF и WOFF2 технически не форматы шрифтов. Они сжаты файлы OpenType с различными степенями сжатия. WOFF2 предлагает лучшее сжатие, а затем WOFF и EOT.

В исследовании покрытия для всех браузеров, вы, возможно, пришли, что-то называется пуленепробиваемый @ font-face синтаксис FontSpring.

Бюллеропроблемный синтаксис использует EOT, WOFF2, WOFF, RAW OPENTYPE и файлы шрифта SVG для максимального покрытия браузера:

 @ font-face {
  Семья шрифтов: Елена;
  SRC: URL (Elena.eoot? #iefix) Формат («Embedded-opentype»),
       URL (Elena.Woff2) формат («WOFF2»),
       URL (Elena.woff) формат («WOFF»),
       URL (Elena.otf) формат («OpenType»),
       URL (Elena.svg # Elena) формат («SVG»);
}

Первая линия URL может выглядеть немного странно для вас. Версии Internet Explorer 8 и ниже не поддерживают синтаксис для нескольких форматов шрифтов и лечить все значение сортировка Собственность как URL.

Пуленепробиваемый синтаксис трюки Internet Explorer 8 и ниже, думая о том, что остальные URL-адреса являются частью идентификатора фрагмента первого URL. Поскольку идентификаторы фрагментов игнорируются при загрузке файлов, Internet Explorer 8 и ниже просто используйте первый URL.

Браузеры, отличные от Internet Explorer, будут пропущены линию, потому что они не поддерживают EOT.

Остальные записи - это то, что вы ожидаете: форматы шрифтов перечислены в порядке предпочтения.

Но это пуленепробиваемый синтаксис все еще актуален? На самом деле, я думаю, что это вредно. Шрифты SVG устарены и поддерживаются только браузерами, которые больше не используются.

Большинство веб-сайтов поддерживают Internet Explorer 9 и up, но синтаксис списков EOT как первый предпочтительный формат шрифта. Несмотря на то, что WOFF Explorer 9 и UP WOFF, эти версии все еще будут загружать файл EOT, просто потому, что он перечислен первый.

Поскольку большинство сайтов больше не поддерживают старые браузеры, я настоятельно рекомендую использовать упрощенный синтаксис. Этот упрощенный синтаксис охватывает все современные браузеры, а также немного более старые, которые все еще используются, такие как Android 4.4 и ранее:

 @ font-face {
  Семья шрифтов: Елена;
  SRC: формат URL (Elena.woff2) («WOFF2»),
       URL (Elena.woff) формат («WOFF»),
       URL (Elena.otf) формат («OpenType»);
}

Несмотря на то, что пожилые версии Android по-прежнему используются, по всемираю зависимость от этих браузеров быстро уменьшается. Вскоре вы, вероятно, сможете удалить формат RAW OPENTYPE, а также упростить синтаксис еще дальше:

 @ font-face {
  Семья шрифтов: Елена;
  SRC: формат URL (Elena.woff2) («WOFF2»),
       URL (Elena.woff) формат («WOFF»);
}

В этом случае кто-то работает старшим браузером, просто увидит ваши защитные шрифты вместо веб-шрифта. Отлично; Они все еще могут прочитать контент в отстанном шрифте.

Есть еще одно возможное значение для сортировка дескриптор То местный Функция принимает имя местного шрифта семьи. Если шрифт будет установлен в системе, браузер будет использовать это вместо этого, тем самым избегая дополнительной загрузки.

 @ font-face {
  Семья шрифтов: Елена;
  SRC: Местная («Елена»),
       Формат URL (Elena-Regular.woff2) («WOFF2»),
       формат URL (Elena-Regular.woff) («WOFF»);
}

Хотя это может показаться отличной оптимизацией, ничто не гарантирует, что местный шрифт соответствует вашему веб-шрифту.

Вы можете получить другую версию шрифта, шрифт с разной языковой поддержкой или даже совершенно разным шрифтом. По этой причине я обычно рекомендую не использовать местный Функция, если вы не найдете эти недостатки приемлемы.

Это выдержка из Брэма Штейна WebFont Handbook , из книги друг от друга. В нем он исследует, что учитывать при выборе веб-шрифтов, как их использовать эффективно, и как оптимизировать для производительности.

Статьи по Теме:

Что, черт возьми, блокчан?
30 расширений Chrome для веб-дизайнеров и разработок
20 удивительных бесплатных веб-шрифтов Google

Как использовать веб-шрифты

Семьи шрифтов

Форматы шрифтов

Инструкции - Самые популярные статьи

Облачное хранение для фотографий и изображений: как выбрать лучшее облако для вашей работы

Как ускорить и оптимизировать сайты WordPress

Как создать цифровые картины воздуха Plein

10 удивительных вещей, которые вы можете сделать с слоями

Создать отзывчивый макет с CSS Grid

Создайте материал плитки в конструкторе вещества

Подготовьте доску для покраски в 3 простых шагах

Как переместить между студией DAZ и ZBRush

Категории