Прежде чем научиться применять переменные шрифты, необходимо понять, что они собой представляют, а для этого нужно сначала понять разницу между стилем шрифта и семейством шрифтов.
Стиль шрифта — это уникальный и специфический шрифт, например, обычный или жирный.
Стиль шрифта — это уникальный и специфический шрифт, например, обычный, или обычный курсив, или полужирный курсив.
Тем не менее, мы можем определить переменные шрифты как один файл, содержащий все стили. То есть, мы можем иметь всю семью в рамках одного файла.
Теперь давайте закодируем его.
1) Загрузите переменную шрифтов.
Для этого примера мы загрузим Roboto Mono из Google Fonts.
- Нажмите на кнопку «Загрузить семью», которая загрузит сжатый файл.
- Распакуйте файл.
- У нас будет папка Roboto_Mono и в ее корне файл RobotoMono-VariableFont_wght.ttf. Это наш файл!
2) Определите переменную fonts.
После загрузки шрифтов нам нужно определить их в нашем проекте, и для этого мы используем правило CSS @font-face, чтобы получить что-то вроде этого:
@font-face {
font-family: 'Roboto Mono';
src: url('/fonts/RobotoMono-VariableFont.ttf') format('truetype-variations');
font-weight: 100 700;
}
Из приведенного выше кода следует отметить две вещи:
- Хотя это файл
.ttf, его формат немного отличается от привычного нам. - В свойстве
font-weightмы определяем диапазон, в котором мы можем перемещать вес шрифта. Здесь мы можем определить не любое значение, а только те, которые принимает шрифт. Google Fonts сообщает нам, каковы эти пределы.
3) Используйте определенный шрифт.
Мы уже загрузили наш шрифт, и он уже определен, осталось только использовать его, и это делается так же, как и с любым другим шрифтом.
Например:
p {
font-family: 'Roboto Mono';
font-weight: 548; /* Acá podemos usar cualquier valor entre 100 y 700 */
}
4) Оптимизируйте, всегда оптимизируйте.
Если вы добрались до этого пункта без проблем и у вас уже работают переменные шрифты, я рекомендую вам просмотреть пост, в котором я даю несколько советов по оптимизации шрифтов.