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