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 | 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 | Наследует свойство от родительского элемента. |
Практика
Какие из свойств можно использовать для стилизации шрифтов в CSS?