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

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

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

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

Шрифт Just Another Hand

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

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

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

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

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

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

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

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

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

@font-face {
  font-family: 'Just Another Hand Fixed';
  font-style: normal;
  font-weight: 400;
  src: local('Just Another Hand'), local('JustAnotherHand-Regular'),
 url('https://fonts.gstatic.com/…woff2') format('woff2'),
 url('https://fonts.gstatic.com/…woff') format('woff');
}

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

@font-face {
  font-family: 'Just Another Hand Fixed';
  src: local('Architects Daughter'), local('ArchitectsDaughter'),
 url('https://fonts.gstatic.com/l/…') format('woff2'),
 url('https://fonts.gstatic.com/l/…') format('woff');
  unicode-range: U+2d, U+3d;
}

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

'='.codePointAt(0).toString(16); // "3d"

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

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

.whatever {
  font-family: 'Just Another Hand Fixed';
}

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

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

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

/* Подставляемый шрифт */
@font-face {
  font-family: 'Just Another Hand Fixed';
  src: url('https://fonts.gstatic.com/l/…') format('woff2') …;
}

/* Главный шрифт */
@font-face {
  font-family: 'Just Another Hand Fixed';
  src: url('https://fonts.gstatic.com/…woff2') format('woff2') …;
}

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

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

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

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

Автор: Jake Archibald

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

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

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

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

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree