w3docs logo

CSS свойство font

font- это сокращенное свойство для следующих свойств:

Можно установить все свойства в следующем порядке: 1. font-style, 2. font-variant, 3. font-weight, 4. font-size / line-height, 5. font-family.

Необходимо установить значения свойств font-size и font-family. Если одно значение отсутствует, используется значение по умолчанию .

Значение по умолчанию Значение по умолчанию свойств.
Применяется Ко всем элементам, а также к ::first-letter и ::first-line.
Наследуется Да
Анимируемое Да. Font-size, font-weight, font-stretch и line-height анимируемы.
Версия CSS1
DOM синтаксис Object.style.font = "talic normal bold 1em/140% "Lucida Grande", sans-serif";

Синтаксис

font: font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .font { font: italic normal  bold 1em/140%  "Lucida Grande", sans-serif;}
    </style>
  </head>
  <body>
    <h2>Пример свойства font</h2>
    <p>Нормальный параграф.</p>
    <p class="font">Параграф с указанным значением шрифта.</p>
  </body>
</html>

Рассмотрим другой пример:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <p class="font1">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вeб-дизайне.</p>
    <p class="font2">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вeб-дизайне.</p>
    <p class="font3">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вeб-дизайне.</p>
    <p class="font4">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вeб-дизайне.</p>
    <p class="font5">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вeб-дизайне.</p>
  </body>
</html>

Пример анимации шрифта, где font-size, font-weight, font-stretch, и line-height анимируемы:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .element {
      border: 2px solid #666;
      width: 350px;
      height: 150px;
      font: 20px "Fira Sans", sans-serif;
      -webkit-animation: element 4s infinite; /* Chrome, Safari, Opera */
      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>Пример анимации шрифта</h2>
    <div class="element">
      <p>Некоторый параграф.</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 Значение элемента наследуется от родительского элемента.

Практикуйте свои знания

Какие значения можно указать для свойства 'font' в CSS?
Считаете ли это полезным?