От автора: в CSS использование переменных шрифтов расширяет возможности. Типографика в Интернете позволяет дизайнерам выразить свое послание. Веб прошел долгий путь развития типографики: от использования только тех шрифтов, которые установлены на компьютере пользователя, до целого ряда странных гарнитур и забавных шрифтов, доступных в сетях доставки контента.
Если вы когда-либо использовали Google Fonts, то могли заметить, что, когда вы добавляете несколько значений толщины для одной и той же гарнитуры, поскольку вы хотите использовать их жирным шрифтом и т. д., Google обычно предупреждает вас, что добавление этих значений замедляет работу страницы. Проблема заключается в том, что для каждого из этих значений толщины необходимо загружать весь шрифт, каждый символ, независимо от того, используете ли вы все символы.
В отличие от этого, переменный шрифт CSS использует переменные CSS для управления свойствами веб-шрифта. Это означает, что один переменный шрифт будет иметь все значения толщины, поэтому, как дизайнер, вы можете стать гораздо более выразительным.
Этим все не ограничивается, потому что некоторые гарнитуры позволяют изменять больше, чем просто толщину гарнитуры. Мы используем шрифт с открытым исходным кодом Amstelvar, с которым связано не менее 17 переменных, так что вы можете получить несколько действительно интересных опций только из одной гарнитуры.
Загрузите файлы данного руководства по этой ссылке
01. Открытие проекта
Войдите в папку «start» в своей IDE и откройте файл «index. html». В разделе страницы body добавьте приведенный ниже код, чтобы задать некоторую структуру и контент для работы с использованием переменных шрифтов CSS. Вы можете изменить текст в соответствии со своими потребностями.
<div class="featured"> <div class="featuredInner"> <h1>Variable</h1> <h2 class="subhead">CSS FONTS</h2> <h2 class="kicker">Multiple styles from just </h2> <h2 class="base">ONE TYPEFACE! </h2>
02. Завершите контент
Теперь добавьте оставшийся код, приведенный ниже. В нашем примере у нас есть абзац большего размера, чем показано здесь — чтобы дать вам описание переменных шрифтов CSS в примере. Вы можете скопировать этот текст из готовой папки или добавить свой собственный при необходимости.
<p class="desc">Add a paragraph description here.</p> </div> </div>
03. Подключите стиль
Весь CSS будет помещен в отдельный файл в папке «CSS». Таким образом, ссылка на него размещается в любом месте раздела «head» страницы. Сохраните страницу index.html, когда вы добавите следующий код:
<link rel="stylesheet" href="css/design.css">
04. Загрузите гарнитуру
В папке «CSS» откройте файл «design.css», который будет пустым. Добавьте приведенный ниже код вверху таблицы стилей. Как вы можете видеть, это идентично тому, как вы загружаете любой локально сохраненный шрифт.
@font-face { font-family: Amstelvar; src: url(../fonts/AmstelvarAlpha-VF.ttf);
}05. Определите стиль страницы
Не забудьте выбрать текст, который выделяется
Теперь HTML и body страницы стилизованы без полей и отступов. Шрифт, который был загружен на предыдущем шаге, теперь применяется как шрифт по умолчанию ко всему тексту на странице. Мы также добавили фоновое изображение, и текст становится белым с небольшой тенью, чтобы он больше выделялся.
html,body { width: 100%; margin: 0; padding: 0; font-family: Amstelvar; background: url(../img/bg.jpg) no-repeat
center center fixed; background-size: cover; color: #fff; text-shadow: 0px 3px 5px rgba(0, 0, 0,
0.4);
}06. Отцентрируйте текст
Самый простой способ центрировать текст по горизонтали и вертикали — использовать более новую сетку CSS в качестве объекта отображения. Эта оболочка, которая инкапсулирует все остальные теги, настроена на распределение на 100% от вертикальной высоты с помощью свойства ‘vh’.
.featured { width: 100%; height: 100vh; display: grid;
}07. Автоцентр
Переменный шрифт применяется как обычный шрифт
Теперь для содержимого внутри мы можем использовать auto как для горизонтальных отступов, так и для вертикальных. Это означает, что мы получим текстовый блок, который будет занимать 60% ширины экрана, и он будет отцентрирован. Текст также центрирован. Как вы можете видеть в браузере, переменный шрифт применяется, как любой обычный шрифт.
.featuredInner { margin: auto auto; text-align: center; width: 60%;
}08. Настройте шрифт
Теперь для шрифта заголовка 1 мы зададим несколько различных свойств. W3C хотел бы, чтобы мы использовали размер шрифта, растяжение и оптический размер, но для этого шрифта оптический размер не доступен. Мы обойдем это ограничение на следующем шаге, а сейчас просто проверьте в браузере, что у нас есть на данный момент.
h1 { font-size: 10vw; line-height: 0.1; font-weight: 550; font-stretch: 100; font-optical-sizing: 24;
}09. Дополнительная настройка шрифта
Amstelvar имеет множество параметров управления
Шрифт Amstelvar имеет много переменных, которые не контролируются командами W3C, но у нас есть способ получить к ним доступ. Добавьте эту строку кода, которая также определяет Y-высоту увеличения — 700 и высоту Y-верхнего регистра. В обоих случаях они уменьшены, и шрифт будет иметь уменьшенную общую высоту.
font-variation-settings: "wght" 550, "wdth" 100, "opsz" 24, "YTAS" 700, "YTUC" 720;
10. Внесите небольшие изменения
Шрифт теперь практически неузнаваем по сравнению с исходным вариантом
Теперь мы добавим стиль подзаголовка. Когда вы посмотрите на него, вы увидите, что толщина, а также оптический размер шрифта изменились. В браузере, это выглядит почти как совершенно другой шрифт.
.subhead { font-size: 7vw; letter-spacing: 0.03em; line-height: 0.2; font-variation-settings: "wght" 100,
"wdth" 100, "opsz" 20, "YTUC" 700;
}11. Создайте разделитель
Теперь мы добавим двойной разделитель. Он будет занимать 40% ширины, чтобы выглядеть меньше текста. Для него мы также добавим небольшую тень. Просто для того, чтобы добавить эстетичный разрыв между первыми и вторыми двумя строками.
.kicker::before { content: ""; display: block; margin: -4% auto 0%; width: 40%; border-bottom: 8px double #fff; box-shadow: 0px 3px 5px rgba(0, 0, 0,
0.4);
}12. Следующая строка
Следующий стиль добавлен, чтобы изменить текст. В нынешнем виде он не выглядит слишком отличающимся от того, что было сделано на предыдущем шаге, но мы добавим больше переменных.
.kicker { font-size: 3.3vw; line-height: 1.5; font-variation-settings: "wght" 156,
"wdth" 100, "opsz" 32,"YTUC" 795;
}13. Дополнительные переменные
Новые переменные выделены жирным шрифтом ниже. XOPQ — ширина буквы x, XTRA — ширина кривой, YOPQ — высота буквы y, YTLC — высота буквы нижнего регистра. YTSE — высота засечек, GRAD — градация букв. YTAS и YTDE — это высота по уменьшение и увеличение y.
.kicker { font-size: 3.3vw; line-height: 1.5; font-variation-settings: "wght" 156,
"wdth" 100, "opsz" 32, "XOPQ" 117, "XTRA" 402,
"YOPQ" 45, "YTLC" 600, "YTSE" 9.5, "GRAD" 90,
"YTAS" 750, "YTDE" 250, "YTUC" 795;
}14. Еще несколько переменных
Обязательно сохраните изменения перед обновлением
Последние несколько переменных, показанных здесь жирным шрифтом, представляют общую высоту y буквы со свойством YTRA, а затем толщину шрифта для абзаца. Сохраните это и обновите страницу в браузере, чтобы изменения вступили в силу. Данные изменения довольно тонкие, но достаточные, чтобы это выглядело как разные шрифты.
.kicker { font-size: 3.3vw; line-height: 1.5; font-variation-settings: "wght" 156,
"wdth" 100, "opsz" 32, "XOPQ" 117, "XTRA" 402,
"YOPQ" 45, "YTLC" 600, "YTSE" 9.5, "GRAD" 90,
"YTAS" 750, "YTDE" 250, "YTUC" 795, "YTRA"
900, "PWGT" 92, "PWDT" 402;
}15. Все изменения
С помощью одного HTTP-запроса можно создать множество разных стилей
Следующая строка текста теперь стилизована приведенным ниже CSS. Мы снова корректируем шрифт, чтобы придать ему вид другой гарнитуры. Сохраните этот код и посмотрите на эффект, который был создан. Вы выполнили только один HTTP-запрос, но сгенерировали другой стиль.
.base { margin-top: -2.5%; font-size: 4vw; line-height: 0.1; font-variation-settings: "wght" 156,
"wdth" 100, "opsz" 32, "XOPQ" 247, "XTRA" 402,
"YOPQ" 45, "YTLC" 600, "YTSE" 9.5, "GRAD" 90,
"YTAS" 750, "YTDE" 250, "YTUC" 795, "YTRA"
900, "PWGT" 92, "PWDT" 402;
}16. Заключительный текст
Для последнего раздела текста мы оставляем настройки по умолчанию для шрифта Amstelvar. Все, что здесь произойдет, это регулировка высоты строки, чтобы сделать текст более читаемым. Мы завершаем стилизацию всего текста. Далее я покажу, как анимировать некоторые свойства.
.desc { line-height: 1.8;
}17. Создание анимации
Давайте вернемся к начальному тегу заголовка и добавим для него анимацию. Для этого добавьте код, выделенный жирным шрифтом. Имя анимации относится к ключевым кадрам, которые будут определены на следующем шаге. Анимация будет длиться четыре секунды, последний ключевой кадр будет фиксироваться.
h1 { font-size: 10vw; line-height: 0.1; animation-name: anim; animation-duration: 4s; animation-fill-mode: forwards; font-variation-settings: "wght" 550,
"wdth" 100, "opsz" 24, "YTAS" 700, "YTUC" 720;
}18. Определите начало
Ключевые кадры для «anim» созданы. Мы добавляем стартовые ключевые кадры. Для толщины гарнитуры задается минимальное значение 100, а для абзаца — 0, поэтому они становится толще на протяжении анимации.
@keyframes anim { from { font-variation-settings: "wght" 100,
"PWGT" 0; }19. Конечная точка
В этом примере ключевые кадры анимированы от одной точки к другой. Приведенный ниже код определяет конечную точку этих ключевых кадров, которая, как вы можете видеть, возвращает толщину шрифта абзаца к значению по умолчанию, а толщину гарнитуры устанавливается так, как это было определено ранее в руководстве.
to { font-variation-settings: "wght" 550,
"PWGT" 100; } }20. Настройка анимации
Когда вы просмотрите анимацию, вы увидите, что она немного прерывистая из-за экстремального изменения толщины шрифта абзаца. Мы задаем для этого свойства значение 50, а для непрозрачности — 0, и создаем эффект постепенного затухания и делаем переход более плавным.
@keyframes anim { from { font-variation-settings: "wght" 100,
"PWGT" 50; opacity: 0; }21. Окончание
Получайте удовольствие, экспериментируя с гарнитурами!
Последнее изменение — мы добавляем непрозрачность 1. Обновите браузер, и вы увидите, что это выглядит намного плавнее. Поэкспериментируйте, анимируя разные свойства, и вы получите интересные результаты. И все это из одной гарнитуры!
to { font-variation-settings: "wght" 550,
"PWGT" 100; opacity: 1; }
}Автор: Mark Shufflebottom
Источник: https://www.creativebloq.com/
Редакция: Команда webformyself.