Статьи

Как использовать кросс-браузерные веб-шрифты, часть 1

Ноябрь 27, 2018

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

Я собираюсь начать с некоторых основных объяснений, чтобы мы все знали, о чем мы говорим, а затем я перейду к некоторым более сложным аспектам в следующей статье.

Вступление

Использование пользовательских шрифтов в Интернете (вне обычного набора веб-безопасных шрифтов) было полной проблемой в течение многих лет, когда веб-дизайнерам приходилось прибегать к странным методам замены текста, таким как замена изображений или siFR , которые оказались хакерскими и негибкими. ,

Но не больше! С тех пор как модуль шрифтов CSS уровня 3 получил широкую поддержку в разных браузерах, ситуация значительно улучшилась. Черт, веб-шрифты работают даже в IE5.5.

Давайте рассмотрим веб-шрифты еще немного.

Основной синтаксис веб-шрифтов

В своей основе система веб-шрифтов опирается на две вещи.

1. Правило @ font-face

Сначала вы вставляете в свой CSS блок, описывающий веб-шрифт, который вы хотите встроить в свою страницу. Вся эта информация заключена в блок @font-face 

 @font-face {
	...
}

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

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

 @font-face {
  font-family: Abril;
}

Примечание. Шрифт Abril Fatface можно найти на Font Squirrel , отличном источнике бесплатных веб-шрифтов.

Далее вам нужно указать местоположение файла шрифта, который вы хотите добавить на свою страницу: 

 @font-face {
  font-family: 'Abril Fatface Regular';
  src: url("AbrilFatface-Regular.otf");
}

Обратите внимание, что вы можете включить в эту строку ряд мест, разделенных запятыми: 

 src: local('Abril Fatface Regular'), url("AbrilFatface-Regular.otf"), url("AbrilFatface-Regular.eot");

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

Далее мы включаем ссылку на шрифт формата Open Type, затем, наконец, мы включаем версию Embedded Open Type для использования старыми версиями IE (это все, что они понимают).

Имейте в виду, что вы не можете указать шрифт в другом домене, если не используете CORS (см. Специфичное для Apache решение на сайте Дэвида Уолша )

Вот и все, что нужно; наш шрифт должен теперь использоваться на нашей веб-странице.

2. Стандартное объявление семейства шрифтов

Теперь мы встроили шрифт в вашу страницу, применить его к некоторому тексту так же просто, как использовать объявление семейства font-family 

 h1 {
  font-size: 8em;
  font-family: 'Abril Fatface Regular', sans-serif;
}

Смотрите мой первый пример приведенного выше кода в действии.

Другие варианты @ font-face

Существует ряд других параметров, которые вы можете включить в правило @font-face 

 @font-face {
  font-family: 'Abril Fatface';
  src: url("AbrilFatface.otf");
  font-weight: bold;
  font-style: italic;
  font-stretch: condensed;
  unicode-range: U+0026;
}

Дескрипторы font-* Здесь, например, мы указываем, что мы хотели бы использовать жирный, курсив, сжатый вариант шрифта, если он доступен, а не браузер, загружающий весь лот.

Дескриптор unicode-range U+0026 Это хорошая техника для экономии полосы пропускания, когда вы хотите использовать только очень специфический набор символов в этом шрифте.

Для получения дополнительной информации читайте http://www.w3.org/TR/css3-fonts/#font-prop-desc и http://www.w3.org/TR/css3-fonts/#unicode-range-desc.

Кросс-браузерная реальность

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

  • Web Open Font Format (.woff): для всех современных браузеров
  • Встроенный открытый тип: для более старых версий Internet Explorer (IE
  • SVG-шрифты: для более старых версий iOS Safari (3.2-4.1)
  • TrueType шрифты: для старых версий браузера Android по умолчанию

Правило @font-faceвтором примере с несколькими браузерами выглядит так: 

 @font-face {
  font-family: 'abril_fatfaceregular';
  src: url('abrilfatface-regular-webfont.eot');
  src: url('abrilfatface-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('abrilfatface-regular-webfont.woff') format('woff'),
       url('abrilfatface-regular-webfont.ttf') format('truetype'),
       url('abrilfatface-regular-webfont.svg#abril_fatfaceregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Это довольно уродливо, но, к счастью, вам не нужно создавать его самостоятельно: онлайн-ресурсы, такие как Font Squirrel, имеют простые в использовании генераторы, которые принимают файл шрифта и генерируют все файлы альтернативного формата и CSS, которые вам нужны.

В следующей части мы немного продвинемся.

Примечание. Если вы действительно хотите узнать, почему все это работает, прочтите синтаксис Bulletproof @ font-face Пола Айриша.

36
Share: