Свойство CSS font-family
The font-family CSS property creates font family names or generic family names for the selected element. See some examples.
Свойство font-family позволяет указать приоритетный список названий семейств шрифтов и/или обобщённых названий семейств шрифтов для выбранного элемента.
Мы используем запятые для разделения значений и отображения их в качестве альтернатив. Браузер выберет первый шрифт для использования, если он доступен. Однако в некоторых случаях он может быть недоступен, если на компьютере пользователя нет этого шрифта. Когда возникает такая ситуация, браузер попытается использовать следующую альтернативу для отображения текста (или даже символа, который первый шрифт не может отобразить).
Существует два типа названий семейств шрифтов:
-
family-name: Это название конкретного шрифта, например, "times", "courier", "arial" и т. д. -
generic-family: Это название обобщённого семейства шрифтов, например, "serif", "sans-serif", "system-ui", "ui-sans-serif", "cursive", "fantasy", "monospace".
Если название шрифта содержит пробелы, оно должно быть заключено в кавычки, например: "Courier New".
success
Когда мы хотим использовать уникальный шрифт, нам нужно использовать @font-face правило.
| Начальное значение | serif |
|---|---|
| Применяется к | Ко всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Да. |
| Поддаётся анимации | Нет. |
| Версия | CSS1 |
| Синтаксис DOM | object.style.fontFamily = "Verdana, sans-serif"; |
Свойство font-family задаёт список шрифтов от наивысшего приоритета до наименьшего резервного. Выбор шрифта не останавливается на первом шрифте в списке; он выполняется посимвольно. Это означает, что если доступный шрифт не содержит глиф для определённого символа, браузер попытается использовать следующие шрифты из списка.
Синтаксис
Синтаксис свойства CSS font-family
font-family: family-name | generic-family | initial | inherit;Пример свойства font-family:
Пример свойства CSS font-family со значением sans-serif
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
</style>
</head>
<body>
<h2>Font-family property example</h2>
<p>We used "Lucida Grande" font-family for this text.</p>
</body>
</html>Значения
| Значение | Описание | Запустить |
|---|---|---|
| family-name, generic-family | Приоритетный список названий семейств шрифтов и/или обобщённых названий семейств шрифтов. | Запустить » |
| initial | Заставляет свойство использовать значение по умолчанию. | Запустить » |
| inherit | Наследует свойство от родительского элемента. | Запустить » |
Практика
Что делает свойство 'font-family' в CSS?