Правило @font-face в CSS
Веб-страницы не ограничены шрифтами, уже установленными на компьютере посетителя. Когда вы нашли понравившийся шрифт, разместите его файл на своём веб-сервере и определите его с помощью правила CSS @font-face. После этого браузер будет автоматически загружать шрифт всякий раз, когда он понадобится.
Распространённые форматы шрифтов
Две группы форматов шрифтов используются чаще всех остальных: WOFF/WOFF2 на веб-страницах и TTF/OTF на настольных компьютерах.
WOFF и WOFF2 (Web Open Font Format): Поскольку эти форматы рассчитаны на небольшой размер файла, они лучше всего подходят для веб-страниц, и их поддерживают все основные браузеры. WOFF появился в 2009 году и с тех пор стал рекомендацией W3C.
TTF и OTF (TrueType Fonts и OpenType Fonts): Компания Apple создала TTF в конце 1980-х годов, и он остаётся самым распространённым форматом как в Mac OS, так и в Microsoft Windows. OTF, созданный компаниями Microsoft и Adobe, расширяет TTF до более продвинутого масштабируемого формата с богатыми возможностями набора текста. Оба стали популярными благодаря своей доступности и качеству, хотя ни один из них не оптимизирован для использования в вебе.
Использование пользовательского шрифта
Пользовательский шрифт настраивается внутри @font-face двумя дескрипторами: font-family задаёт ему название (например, «myFont»), а src указывает на его файл.
Затем HTML-элемент получает этот шрифт, когда его свойство font-family использует это название.
Пример
Output: complete HTML page "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Font Usage</title>
<style>
@font-face {
font-family: myFont;
src: url(sansation_light.woff);
}
p {
font-family: myFont;
}
</style>
</head>
<body>
<h1>Custom Font Example</h1>
<p>This paragraph uses a custom font called "myFont", loaded with the @font-face rule.</p>
</body>
</html>
Жирный пользовательский шрифт
Для жирного текста нужно собственное правило @font-face, содержащее дескрипторы для жирной версии.
Жирные символы находятся в отдельном файле шрифта, и браузеры обращаются к нему всякий раз, когда текст с этим семейством шрифтов должен отображаться жирным.
Совет: для одного шрифта можно написать сколько угодно правил @font-face.
Пример
Output: complete HTML page "}, {
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bold Custom Font</title>
<style>
@font-face {
font-family: myFont;
src: url(sansation_light.woff);
}
@font-face {
font-family: myFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
p {
font-family: myFont;
}
</style>
</head>
<body>
<h1>Bold Custom Font Example</h1>
<p>This text uses the regular version of the custom font.</p>
<p><b>This text uses the bold version of the custom font.</b></p>
</body>
</html>
Дескрипторы @font-face в CSS
Эти дескрипторы шрифта можно использовать внутри @font-face:
font-family— обязательный. Название, которое вы даёте шрифту.src— обязательный. URL, по которому находится файл шрифта.font-stretch— необязательный. Как растягивается шрифт. Значение по умолчанию — «normal».font-style— необязательный. Какой стиль оформления у шрифта. Значение по умолчанию — «normal».font-weight— необязательный. Насколько насыщенный шрифт. Значение по умолчанию — «normal».font-display— необязательный. Как ведут себя загрузка и отображение шрифта. Значение по умолчанию — «auto».unicode-range— необязательный. Какие символы Юникода поддерживает шрифт. Значение по умолчанию — «U+0-10FFFF».