Обєднання шрифтів

20

Від автора: мені подобається шрифт 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 браузер заздалегідь знає, що йому потрібно, тому шрифти завантажуються паралельно. Демо.

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