Объединение шрифтов

Объединение шрифтов

От автора: мне нравится шрифт Just Another Hand, я часто использую его в графиках во время своих выступлений. Но мне не нравится, как в нем расположены символы тире и равно… Расположение довольно странное – они слишком высоко. К счастью CSS позволяет объединять шрифты. Я могу создать семейство шрифтов как Just Another Hand, но символы тире и равно взять из другого шрифта Architects Daughter.

Объединение шрифтов

Шрифт Just Another Hand

Объединение шрифтов

Символы тире и равно в шрифте Just Another Hand

Объединение шрифтов

Символы тире и равно из другого шрифта Architects Daughter

Как это работает

Правило @font-face задается как всегда:

Я добавил еще один @font-face с таким же именем для символов тире и равно:

Вся суть в дескрипторе unicode-range. Он указывает, что src должен использоваться только для кодовых точек тире (U+2d) и равно (U+3d). Превратить символ Юникода в точку кода можно с помощью следующего кода:

Для оптимизации я использовал параметр text Google fonts для подстановки шрифта Architects Daughter, поэтому он содержит только тире и равно. Файл woff2 весит 500 байт – неплохо!

Вот и все. Теперь, когда я использую:

… используется комбинация обоих шрифтов!

Обновление: вам нужен Unicode-range?

Несколько людей в Twitter и комментариях предложили не использовать unicode-range, и что можно просто сделать так:

Визуально так тоже сработает, но такой подход хуже с точки зрения производительности.

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

В методе с unicode-range браузер заранее знает, что ему нужно, поэтому шрифты загружаются параллельно. Демо.

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

Автор: Jake Archibald

Источник: //jakearchibald.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: