CSS свойство font
Свойство font в CSS задаёт шрифт элемента. Изучите свойства краткой записи font и просмотрите примеры.
Свойство font является краткой записью для следующих свойств:
Вы можете задать все свойства в следующем порядке: 1. font-style, 2. font-variant, 3. font-weight, 4. font-stretch, 5. font-size / line-height, 6. font-family. Свойство line-height используется для задания межстрочного интервала.
Обязательно указывать значения свойств font-size и font-family. Если одно из значений пропущено, используется его значение по умолчанию.
Все отдельные значения краткой записи font, которые не указаны, будут установлены в начальное значение.
| Свойство | Описание |
|---|---|
| Начальное значение | Значения по умолчанию для свойств. |
| Применяется к | Всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Да. |
| Анимируемо | Да. Font-size, font-weight, font-stretch и line-height поддерживают анимацию. |
| Версия | CSS1 |
| DOM Syntax | Object.style.font = "italic normal bold 1em/140% 'Lucida Grande', sans-serif"; |
Font как краткое свойство
При использовании этого краткого свойства важно знать несколько важных вещей:
Обязательные значения
Значения «font-size» и «font-family» считаются обязательными. Всё объявление будет проигнорировано, если одно из этих значений отсутствует.
Необязательные значения
Остальные пять значений являются необязательными. При использовании одного из этих значений учтите, что они должны располагаться перед значением «font-size» в объявлении, иначе они будут проигнорированы.
Свойства font и font-stretch
Свойство font-stretch поддерживается во всех современных браузерах.
Наследование необязательных значений
Если вы пропустите необязательные значения, они не унаследуют значения от родительского элемента. Они будут сброшены в начальное состояние.
Ключевые слова для системных шрифтов
Следующие значения свойства font могут использоваться в качестве ключевых слов:
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
Они устанавливают шрифт, который используется в операционной системе пользователя для данной категории. Например, если указать значение «menu», шрифт элемента будет таким же, как в выпадающих меню и списках меню операционной системы.
Эти ключевые слова могут использоваться только с кратким свойством font.
Синтаксис
Синтаксис CSS свойства font
font: font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit;Пример свойства font:
Пример CSS свойства font с параметрами font-style, font-variant, font-weight, font-size, line-height и font-family
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.font {
font: italic normal bold 1em/140% "Lucida Grande", sans-serif;
}
</style>
</head>
<body>
<h2>Font property example</h2>
<p>This is some normal paragraph.</p>
<p class="font">This is a paragraph with specified font value.</p>
</body>
</html>Результат
Пример свойства font с курсивными шрифтами:
Примеры CSS свойства font с параметрами font-family, font-size, font-variant и font-style
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.font1 {
font: italic small-caps bold 20px/1 cursive;
}
.font2 {
font: italic 1.2em "Fira Sans", serif;
}
.font3 {
font: 1.2em "Fira Sans", sans-serif;
}
.font4 {
font: small-caps bold 28px/1.5 sans-serif;
}
.font5 {
font: caption;
/* font: menu | icon | message-box | small-caption | status-bar;*/
}
</style>
</head>
<body>
<h2>Font property example</h2>
<p class="font1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font5">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Пример свойства font, где font-size, font-weight и line-height поддерживают анимацию:
Пример анимации шрифта с использованием свойств font-size, font-weight, font-stretch и line-height
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element {
border: 2px solid #666;
width: 350px;
height: 150px;
font: 20px "Fira Sans", sans-serif;
-webkit-animation: element 4s infinite;
animation: element 4s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes element {
50% {
font: 50px bold;
}
}
/* Standard syntax */
@keyframes element {
50% {
font: 50px bold;
}
}
</style>
</head>
<body>
<h2>Font animation example</h2>
<div class="element">
<p>Some paragraph</p>
</div>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| font-style | Задаёт стиль шрифта. Значение по умолчанию — normal. |
| font-variant | Задаёт вариант шрифта. Значение по умолчанию — normal. |
| font-weight | Задаёт жирность шрифта. Значение по умолчанию — normal. |
| font-size/line-height | Задаёт размер шрифта и межстрочный интервал. Значение по умолчанию — normal. |
| font-family | Задаёт семейство шрифтов. Значение по умолчанию зависит от браузера. |
| caption | Шрифт, используемый для элементов управления с подписями (например, кнопок, выпадающих списков). |
| icon | Шрифт, используемый для подписи иконок. |
| menu | Шрифт, используемый в меню (например, в выпадающих меню и списках меню). |
| message-box | Шрифт, используемый в диалоговых окнах. |
| small-caption | Шрифт, используемый для подписи небольших элементов управления. |
| status-bar | Шрифт, используемый в строках состояния окна. |
| initial | Устанавливает значение свойства по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |