Работа с шрифтами в CSS. Подключение кастомных шрифтов
![Работа с шрифтами в CSS. Подключение кастомных шрифтов](/assets/images/covers/html-and-css-fonts.png)
В этой статье мы изучим свойства для работы с шрифтами в CSS: font-family, font-size и font-weight. Кроме этого разберём как подключать кастомные шрифты.
Установка шрифта (font-family)
Установка шрифта в CSS осуществляется с помощью свойства font-family
. В качестве значения мы можем указать как один шрифт, так и несколько, перечислив их через запятую:
body {
font-family: "Segoe UI", Arial, sans-serif;
}
В этом примере мы для тега <body>
установили шрифты в следующем порядке:
- Segoe UI;
- Arial;
- sans-serif.
sans-serif
- это не шрифт, а ключевое слово в CSS, с помощью которого мы указываем общее семейство шрифтов. В данном случае, семейство шрифтов без засечек. По факту оно будет обозначать шрифт, который установлен в браузере по умолчанию для этого семейства шрифтов.
В большинстве случаев указание нескольких шрифтов в font-family
нужно лишь для того, чтобы улучшить качество отображения текста на различных устройствах. Так как не на каждом из них имеется тот или иной шрифт.
В этом случае сначала указывают самый желаемый шрифт, потом менее желаемый, и завершают этот список обычно общим типом шрифта. Чтение этого списка браузер выполняет слева направо до первого найденого шрифта. Таким образом, как только браузер обнаружит какой-то из перечисленных шрифтов, он его сразу же будет использовать. Продолжать идти дальше по списку и проверять оставшиеся шрифты он не будет.
В случае, когда ни один из заданных шрифтов не найден, будет использоваться тот, который указан в настройках браузера по умолчанию. В Chrome посмотреть, какой шрифт используется по умолчанию можно в разделе «Настроить шрифты»: «Настройки» -> «Внешний вид» -> «Настроить шрифты». Кстати, здесь же его при необходимости можно изменить на другой:
![Настройка шрифтов в браузере Chrome](/assets/images/html-and-css/fonts/customizing-fonts-in-chrome.png)
В настройках браузера можно изменить не только общий шрифт по умолчанию, но и шрифты для некоторых общих категорий шрифтов. В основном для serif
, sans-serif
и monospace
. Изменить дефолтный шрифт для других семейств (fantasy
, cursive
и так далее) в большинстве случаев нельзя.
Пример, как в очень популярном CSS-фреймворке Bootstrap 5 выполняется установка шрифта для тега <body>
и, следовательно, по умолчанию для всех вложенных в него элементов:
body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
Шрифты, в названии которых имеется хотя один пробел, должны быть заключены в кавычки. Наприпер: "Segoe UI", "Helvetica Neue" и так далее.
В конце как правило после всех шрифтов необходимо указать их общее семейство. Так как нет гарантии, что эти шрифты имееются на устройстве пользователя. В этом случае хотя бы будет использоваться шрифт из этого семейства, а неизвестно какой. В этом примере как раз для этого случая указано семейство шрифтов sans-serif
.
Кроме этого в начале указано ключевое слово system-ui
. Какой шрифт оно обозначает? Чтобы это понять, рассмотрим какие вообще имеются основные ключевые слова, которые могут использоваться для указания общих семейств шрифтов:
system-ui
– общее семейство системных шрифтов; оно указывает, что в качестве шрифта будет использоваться системный шрифт операционной системы, но так как разные операционные системы используют разные системные шрифты, то в Windows это будет «Segoe UI», в macOS – «San Francisco», в Android – «Roboto».-apple-system
– обозначает, что на устройствах Apple (iPhone, iPad и Mac) нужно использовать системный шрифт операционной системы.serif
– шрифт с засечками. Например: Georgia, Times New Roman.sans-serif
– шрифт без засечек. Например: Arial, Tahoma, Trebuchet MS, Verdana, San Francisco, Segoe UI.monospace
– моноширинный шрифт, то есть такой у которого все символы (глифы) имеют одинаковую ширину. Например: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New.cursive
– шрифты, имитирующие почерк. Например: Comic Sans MS, Comic Sans, Apple Chancery, Bradley Hand, Snell Roundhand.fantasy
– декоративные шрифты, которые в основном используются для названий, заголовков и так далее. Например: Impact, Luminari, Chalkduster, Jazz LET, Stencil Std.emoji
– шрифты, специально предназначенные для отображения эмодзи. Например: Apple Color Emoji, Segoe UI Emoji.
Свойство font-family
является наследуемым. Это значит, что при его установке некоторому элеиенту, оно по цепочке вложенности передаётся всем его потомкам.
![Наследование свойства font-family](/assets/images/html-and-css/fonts/inherited.png)
Поэтому шрифт, который должен иметь основный текст на странице обычно устанавливают на уровне <body>
. А отдельным элементам, например, заголовкам <h1>..<h3>
задают его уже на уровне этих элементов:
body {
font-family: Arial, sans-serif;
}
h1, h2, h3 {
font-family: "Times New Roman", serif;
}
Размер шрифта (font-size)
В CSS установка размера шрифта осуществляется с помощью свойства font-size
.
Например, назначим для <p>
размер шрифта, равный 18px:
p {
font-size: 18px;
}
Задавать размеры шрифта можно в различных единицах измерения:
px
– в пикселях;em
– относительно размера шрифта родителя;rem
– относительно размера шрифта элемента<html>
;%
– относительно размера шрифта родителя; аналогичноem
, только значение указывается в процентах;vw
,vh
,vmin
,vmax
– относительно viewport;
Другие единицы измерения (mm
, cm
, pt
, pc
) сейчас практически не используются.
Кроме использования единиц измерения, задавать размер тексту можно ещё с помощью следующих ключевых слов:
xx-small
(9px);x-small
(10px);xx-small
(13px);medium
– начальное значениеfont-size
(обычно 16px);large
(18px);x-large
(24px);xx-large
(32px);xxx-large
(48px).
В скобках приведены значения для справки, чтобы понять, как эти ключевые слова соотносятся друг к другу. Точные из значения зависят от настроек браузера и операционной системы. На практике эти ключевые слова обычно не используют.
Кроме этих ключевых слов имеются ещё два: smaller
и larger
. Они позволяют сделать размер шрифта немного меньше или больше, чем у родителя.
Насыщенность шрифта (font-weight)
Установка насыщенности шрифту (толщины букв) в CSS осуществляется с помощью свойства font-weight
:
/* установим жирный текст для всех элементов с классом title */
.title {
font-weight: bold;
}
Задать толщину тексту можно с помощью числа или ключевого слова. Список значений от самого тонкого до самого жирного начертания:
100
– тонкое;200
– сверхсветлое;300
– светлое;400
илиnormal
– стандартное (значение по умолчанию);500
– среднее;600
– полужирное;700
илиbold
– жирное;800
– сверхжирное;900
– тяжёлое.
Чтобы использовать все эти начертания, шрифт должен их поддерживать. В противном случае браузер будет использовать ближайшее начертание, которое этот шрифт имеет. Набиолее часто из всех значений используются два: normal
и bold
.
Например, установим заголовкам <h2>
стандартное начертание текста:
h2 {
font-weight: normal;
}
На этом рисунке приведены начертания стандартного шрифта «Segoe UI» от 100 до 900.
![Управление насыщенностью шрифта в CSS с помощью свойства font-weight](/assets/images/html-and-css/fonts/font-weight.png)
Как видите, от 100 до 300 этот шрифт имеет одинаковое начертание. Также оно не отличается в диапазонах: 500-600 и 800-900.
Например, установим заголовкам <h2>
внутри .card
среднюю толщину букв тексту:
.card h2 {
font-weight: 500;
}
Кроме абсолютных значений у font-weight
имеются ещё относительные: lighter
и bolder
. С помощью них мы можем установить соотвественно более тонкое или толстое начертание шрифту, чем то, которое имеется у его родителя:
/* в элементах <span>, расположенных непосредственно в <p>, текст будет на один уровень меньше по жирности, чем у родительского элемента */
p > span {
font-weight: lighter;
}
На практике относительные значения bolder
и lighter
практически не используются.
Стиль шрифта (font-style)
С помощью свойства font-style
мы можем установить начертание шрифта:
normal
– обычное (значение по умолчанию);italic
– курсивное;oblique
– наклонное;oblique 14deg
– с указанием угла наклона текста.
При этом браузер сначала попытается найти данный стиль шрифта среди подключенных. Если его нет, то браузер синтезирует его самостоятельно.
Допустимые значения — это градусы от -90deg до 90deg включительно.Подключение кастомных шрифтов
Для создания уникального дизайна сайта очень часто не хватает шрифтов, встроенных в операционную систему. Для загрузки и подключения нестандартных шрифтов в CSS существует директива @font-face
. Но перед тем как её рассмотреть разберём ещё один очень важный момент.
По факту в font-family
мы указываем не сам шрифт, а его семейство. Семейство – это полный набор стилей, а стиль – это отдельный и конкретный шрифт в этом семействе. Например, семейство «Roboto» состоит из следующих стилей (шрифтов):
![Список шрифтов из которых состоит семейство шрифтов Roboto](/assets/images/html-and-css/fonts/font-family.png)
Поэтому, когда браузер применяет стиль, ему нужно знать не только семейство, но и такие свойства как font-style
(начертание) и font-weight
(насыщенность).
Кроме этого, стоит отметить про новый шрифтовой формат — вариативные шрифты (variable fonts). До их появления каждый стиль реализовывался как отдельный файл шрифта. В случае вариативных шрифтов все стили могут содержаться в одном файле. Кроме этого, описание вариативных шрифтов может сопровождаться кроме font-style
и font-weight
ещё другими свойствами. Например, font-variant
,font-stretch
и так далее. Но эти шрифты не так популярны и в этой теме мы их рассматривать не будем.
Пример подключения шрифта «Roboto» к странице и установка его по умолчанию в качестве базового шрифта для сайта:
/* подключение шрифта Roboto */
@font-face {
font-family: "Roboto";
src: local("Roboto"),
local("Roboto-Regular"),
url("/assets/fonts/roboto-regular.woff2") format("woff2");
}
/* установка Roboto в качестве основного шрифта */
body {
font-family: Roboto, sans-serif;
}
Деректива @font-face
должна обязательно содержать следующие два свойства:
font-family
– семейство шрифтов, к которому относится этот вариант шрифта (при этом данное название необязательно должно соотвествовать настоящему имени шрифта);src
– один или несколько источников, из которых браузер может взять данный шрифт.
Свойство font-family
нужно для того, чтобы мы могли потом использовать этот шрифт по данному имени. Как например, мы это сделали в <body>
.
В свойстве src
источник можно определять с помощью функции local()
и url()
. Функция local()
предназначена для поиска шрифта на устройстве пользователя по его имени, а url()
– для загрузки шрифта из файла по указанному URL-адресу. Этот файл в данном формате должен быть доступен по указанному адресу.
Очень часто local()
и url()
используют вместе. Это позволяет, если доступен шрифт на устройстве поользователя, то использовать его. Если его нет, то загрузить его с сервера по указанному URL:
@font-face {
font-family: "Roboto";
/* браузер сначала попробует найти шрифт на устройстве пользователя по имени Roboto */
src: local("Roboto"),
/* если не получилось, то попробует найти его на устройстве пользователя по имени Roboto-Regular */
local("Roboto-Regular"),
/* если не получилось, то загрузит его с сервера по указанному URL */
url("/assets/fonts/roboto-regular.woff2") format("woff2");
}
В этом примере с помощью format()
мы указали формат этого шрифта. В данном случае «woff2» – Web Open Font Format. Данный формат поддерживают все современные браузеры. Использовать какие-то другие форматы не нужно. Но, если нужна поддержка старых браузеров, то тогда нужно добавить другие форматы шрифтов, которые они поддерживают. Например, woff, ttf или ещё какие-то другие:
@font-face {
font-family: "Roboto";
src: local("Roboto"),
local("Roboto-Regular"),
url("/assets/fonts/roboto-regular.woff2") format("woff2"),
/* если шрифт не доступен или не подерживается woff2, то загрузит woff */
url("/assets/fonts/roboto-regular.woff") format("woff"),
/* если шрифт не доступен или не подерживается woff, то загрузит ttf */
url("/assets/fonts/roboto-regular.ttf") format("ttf"),
}
Если мы хотим, чтобы текст был стилизован как жирный или курсив, но мы подключили только один вариант шрифта (например, для стандартного начертания), то браузеры могут компенсировать их отсутствие и создавать подобное начертание самостоятельно. При этом нужно понимать, что они будут делать так как могут и в разных браузерах результат может быть разным и не всегда то чего вы хотите.
Поэтому, чтобы этого избежать нам нужно для каждого стиля подключить свою версию шрифта с помощью @font-face
. В этом случае браузер при отрисовке текста будет использовать соответствующую версию шрифта и текст будет отображаться так как нужно.
Например, для того чтобы браузер для отрисовки курсивного текста (font-style: italic
) с насыщенностью 400 (font-weight: 400
) использовал соотвествующую версию шрифта нужно добавить ещё один @font-face
:
/* шрифт Roboto для стандартного начертания */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(/assets/fonts/roboto-regular.woff2) format('woff2');
}
/* шрифт Roboto для курсива */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
src: local('Roboto Italic'), local('Roboto-Italic'), url(/assets/fonts/roboto-italic.woff2) format('woff2');
}
Допонительно в @font-face
мы добавили свойства font-style
и font-weight
, чтобы браузер знал, какую версию шрифта нужно использовать в том или ином случае.
Если мы хотим, чтобы для жирного начертания браузер тоже использовал соотвествующую версию шрифта, то её также необходимо добавить с помощью @font-face
к уже 2 имеющимся:
/* для жирного начертания */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'), url(/assets/fonts/roboto-bold.woff2) format('woff2');
}
Подключение шрифтов с Google Fonts
Google Fonts – это бесплатный сервис, с помощью которого можно очень просто подключить на страницу нестандартный шрифт. Google Fonts содержит более 1500 семейств шрифтов и все они имеют открытый исходный код.
Наиболее популярными семействами на этом сервисе являются: Roboto, Open Sans, Noto Sans, Montseratt, Lato, Poppins, Inter, Oswald и так далее.
Для подключения шрифтов необходимо выбрать нужные семейства и в них одно или несколько необходимых начертаний:
![Выбор необходимых начертаний в нужных семействах в бесплатном сервисе Google Fonts](/assets/images/html-and-css/fonts/google-fonts-selected-families.png)
После этого скопировать сгенерированный HTML-код и вставить его раздел <head>
:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Roboto:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
Теперь выбранные шрифты можно использовать в свойстве font-family
:
/* по умолчанию для основного текста */
body {
font-family: 'Roboto', sans-serif;
}
/* для заголовков */
h1, h2, h3 {
font-family: 'Montserrat', sans-serif;
}
Если перейти по ссылке, которую нам даёт Google Fonts, то мы увидим ничто иное как CSS-код, содержащий множество @font-face
для подключения каждого конкретного выбранного варианта шрифта.
![Содержимое URL-адреса, которую нам даёт Google Fonts](/assets/images/html-and-css/fonts/google-fonts-url.png)
Из интересных свойств, которые мы ещё не рассматривали – это font-display
и unicode-range
.
Свойство font-display
предназначено для настройки поведения текста на странице во время загрузки шрифта. Этому свойству можно установить одно из следующих значений:
auto
– определяется браузером; в большинстве своём он близок кblock
;block
– если в течение 3 секунд нужный шрифт не загрузился, браузер его покажет невидимым запасным шрифтом; после загрузки отображение текста будет переключено на него;swap
– если менее чем за 100мс шрифт не загрузился, то текст будет отображён запасным шрифтом; после того как нужный шрифт будет загружен текст будет переключен на него;fallback
– если менее чем за 100мс шрифт не загрузился, то текст будет отображён запасным шрифтом; после этого, если в течение 3 секунд нужный шрифт загрузился, то текст будет переключен на него; но если этого не произошло, текст останется на запасном шрифте;optional
– похож наfallback
, но в отличие от него здесь период для замены 3 секунды не задан; поэтому решение переключать отображение текста или нет на нужный шрифт остаётся за браузером.
Свойство unicode-range
позволяет указать диапазон символов Unicode, которые необходимо загрузить из шрифта. То есть с помощью него мы можем уменьшить количество загружаемых данных, так как из шрифта будут загружаться только те символы, которые действительно нужны.
Например, такой диапазон символов Unicode используется в Google Fonts для поддержки кириллицы:
/* киррилица */
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Roboto'),
local('Roboto-Regular'),
local('sans-serif'),
url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
Комментарии: 3
Здравствуйте.В настройках браузера можно изменить не только общий шрифт по умолчанию, но и шрифты для некоторых общих категорий шрифтов. В основном для serif, sans-serif и monospace.
Если я поменяю в семействе serif шрифт по умолчанию на Times например,то при указании семейства serif будет показываться Times.Как в этом случае мне подключить шрифт serif а не семейство?Если более конкретно как мне писать чтобы браузер понимал ,что я хочу указать serif не как имя семейства шрифтов а как имя шрифта?
Привет! Так что хочешь настроить?
В браузере – это настраиваешь конкретно для себя. То есть каким шрифтом будет отображаться конкретно у тебя в браузере семейство serif на всех сайтах. Здесь выбираешь из списка в настройках браузера любой шрифт, который у тебя имеется на устройстве.Если хочешь настроить на сайте, то можешь указать в качестве имени любое, например «Any Name»: