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

Дата публикации: 2017-05-18

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

От автора: мне нравится шрифт 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('//fonts.gstatic.com/…woff2') format('woff2'),
       url('//fonts.gstatic.com/…woff') format('woff');
}

@font-face {

font-family: 'Just Another Hand Fixed';

font-style: normal;

font-weight: 400;

src: local('Just Another Hand'), local('JustAnotherHand-Regular'),

url('//fonts.gstatic.com/…woff2') format('woff2'),

url('//fonts.gstatic.com/…woff') format('woff');

}

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

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

@font-face {

font-family: 'Just Another Hand Fixed';

src: local('Architects Daughter'), local('ArchitectsDaughter'),

url('//fonts.gstatic.com/l/…') format('woff2'),

url('//fonts.gstatic.com/l/…') format('woff');

unicode-range: U+2d, U+3d;

}

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

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

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

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

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

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

.whatever {

font-family: 'Just Another Hand Fixed';

}

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

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

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

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

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

/* Подставляемый шрифт */

@font-face {

font-family: 'Just Another Hand Fixed';

src: url('//fonts.gstatic.com/l/…') format('woff2') …;

}

/* Главный шрифт */

@font-face {

font-family: 'Just Another Hand Fixed';

src: url('//fonts.gstatic.com/…woff2') format('woff2') …;

}

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

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

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

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

Автор: Jake Archibald

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

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

Метки: шрифты