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

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

От автора: мне нравится шрифт 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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree