Spec-Zone.ru › CSS

Свойство CSS `font`

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

font — CSS-сокращённое свойство, задающее все различные свойства шрифта элемента. Также оно позволяет задать для элемента системный шрифт.

Попробуйте

font:
  1.2rem "Fira Sans",
  sans-serif;

font:
  italic 1.2rem "Fira Sans",
  serif;

font: italic small-caps bold 16px/2 cursive;

font: small-caps bold 24px/1 sans-serif;

font: caption;

<section id="default-example">
  <q id="example-element">
    Prejudices, it is well known, are most difficult to eradicate from the heart
    whose soil has never been loosened or fertilized by education: they grow
    there, firm as weeds among stones.
  </q>
</section>

@font-face {
  font-family: "Fira Sans";
  src:
    local("FiraSans-Regular"),
    url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Fira Sans";
  src:
    local("FiraSans-Italic"),
    url("/shared-assets/fonts/FiraSans-Italic.woff2") format("woff2");
  font-weight: normal;
  font-style: italic;
}

section {
  margin-top: 10px;
  font-size: 1.1em;
}

Составные свойства

Это свойство является сокращённой записью следующих свойств CSS:

  • font-family
  • font-size
  • font-width
  • font-style
  • font-variant
  • font-weight
  • line-height

Синтаксис

/* font-size font-family */
font: 1.2em sans-serif;

/* font-size/line-height font-family */
font: 1.2em/2 "Fira Sans", sans-serif;

/* font-style font-weight font-size font-family */
font: italic bold 1.2em monospace;

/* font-width font-variant font-size font-family */
font: ultra-condensed small-caps 1.2em Montserrat, Helvetica, sans-serif;

/* system font */
font: caption;

Значения

Значением может быть сокращённая запись, задающая различные свойства шрифта, или одно ключевое слово <system-font-family-name>:

<'font-style'> Необязательно
См. свойство CSS font-style. По умолчанию — normal.
<font-variant-css2> Необязательно
Значение normal или small-caps свойства font-variant. По умолчанию — normal.
<'font-weight'> Необязательно
См. свойство CSS font-weight. По умолчанию — normal.
<font-width-css3> Необязательно
Ключевые слова, поддерживаемые свойством CSS font-width. По умолчанию — normal.
<'font-size'>
См. свойство CSS font-size.
<'line-height'> Необязательно
См. свойство CSS line-height. По умолчанию — normal.
<'font-family'>
См. свойство CSS font-family. Должно быть последним значением.
<system-font-family-name>
Одно ключевое слово, обозначающее системный шрифт, например:
caption
Системный шрифт для элементов управления с подписями (кнопок, раскрывающихся списков и т. д.).
icon
Системный шрифт для подписей к значкам.
menu
Системный шрифт для меню (например, раскрывающихся меню и списков меню).
message-box
Системный шрифт для диалоговых окон.
small-caption
Системный шрифт для подписей к небольшим элементам управления.
status-bar
Системный шрифт для строк состояния окон.

Существует несколько нестандартных значений с префиксами.

Описание

Значение свойства font — это либо одно ключевое слово, обозначающее имя семейства системных шрифтов, либо несколько значений отдельных свойств, задающих все различные свойства шрифта элемента.

Объявления системных шрифтов

Если font задано как ключевое слово <system-font-family-name>, полное значение свойства должно состоять из этого единственного ключевого слова без учёта регистра. Допустимые значения: caption, icon, menu, message-box, small-caption или status-bar.

Браузеры также поддерживают нестандартные значения с префиксами:

  • Chromium реализует -webkit-control, -webkit-small-control и -webkit-mini-control.
  • WebKit включает значения Chromium, а также добавляет -webkit-body, -webkit-pictograph и -webkit-ruby-text, а также несколько имён системных шрифтов с префиксом -apple-system-*.
  • Gecko реализует -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list и -moz-field.

Системный шрифт, или <system-font-family-name>, можно задать только с помощью свойства font. Указание одного ключевого слова, например font: icon, задаёт семейство, размер, насыщенность, стиль и другие параметры шрифта в соответствии со значениями, определёнными браузером для указанного системного шрифта. Все эти значения можно изменить с помощью отдельных объявлений, размещённых после объявления font.

Добавление любых отдельных компонентов font после ключевого слова <system-font-family-name> в значении свойства font делает объявление недействительным. Например, font: icon small недействительно.

Если ключевое слово <system-font-family-name> находится в значении не на первом месте, оно считается <ident>, обозначающим стандартное имя font-family. Например, объявление font: small icon задаёт для font-family шрифт с именем icon, который не является системным и может существовать или не существовать. Это объявление также задаёт для font-size значение small и сбрасывает остальные свойства-компоненты сокращённой записи до их начальных значений.

Объявления с сокращённой записью шрифта

Если font задано как сокращённая запись нескольких свойств, связанных со шрифтом, то:

  • оно должно включать значения для:
    • font-size
    • font-family
  • оно может дополнительно включать значения для:
    • font-style
    • font-variant
    • font-weight
    • font-width
    • line-height

Как и в случае с любым сокращённым свойством, неуказанные свойства-компоненты задаются начальными значениями, что может переопределить значения, ранее заданные с помощью отдельных свойств. Кроме того, сокращённая запись сбрасывает следующие свойства до их начальных значений. Явно задать их с помощью сокращённой записи нельзя:

  • font-feature-settings
  • font-kerning
  • font-language-override
  • font-optical-sizing
  • font-size-adjust
  • font-variant-alternates
  • font-variant-caps
  • font-variant-east-asian
  • font-variant-emoji
  • font-variant-ligatures
  • font-variant-numeric
  • font-variant-position
  • font-variation-settings

Порядок компонентов в сокращённом свойстве

Порядок некоторых отдельных значений в объявлении сокращённого свойства font должен соответствовать нескольким правилам:

  • Обязательны компоненты font-size и font-family (кроме объявлений системных шрифтов).
  • Компоненты font-style, font-variant и font-weight должны предшествовать значению font-size.
  • Компонент line-height можно включить только при наличии font-size. Если он присутствует, line-height должен непосредственно следовать за font-size, а два значения должны разделяться косой чертой (/), например: 16px / 3.
  • font-family должно быть последним указанным значением.

Компоненты с ограниченным набором значений

Для обеспечения обратной совместимости допустимые значения компонентов font-variant и font-width не включают все допустимые значения соответствующих отдельных свойств.

Допустимые значения компонента font-variant ограничены значениями normal или small-caps. Другие значения не поддерживаются, однако объявление сокращённого свойства font сбрасывает все отдельные свойства font-variant-* до значения normal, включая font-variation-settings, font-variant-position, font-variant-emoji, font-variant-caps, font-variant-ligatures, font-variant-numeric, font-variant-east-asian и font-variant-alternates.

Допустимые значения компонента font-width ограничены ключевыми словами: normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded. Отдельное свойство font-width также поддерживает значения <percentage>, но их нельзя использовать в сокращённой записи.

Формальное определение

Начальное значение для каждого свойства, входящего в сокращённую запись:
  • font-style
  • font-variant
  • font-weight
  • font-stretch
  • font-size
  • line-height
  • font-family
Применяется к всем элементам и тексту
Наследуется да
Проценты для каждого свойства, входящего в сокращённую запись:
  • font-size
  • line-height
Вычисленное значение для каждого свойства, входящего в сокращённую запись:
  • font-style
  • font-variant
  • font-weight
  • font-stretch
  • font-size
  • line-height
  • font-family
Тип анимации для каждого свойства, входящего в сокращённую запись:
  • font-style
  • font-variant
  • font-weight
  • font-stretch
  • font-size
  • line-height
  • font-family

Формальный синтаксис

font = 
  [ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'># ] |
  <system-family-name>

<font-variant-css2> = 
  normal |
  small-caps

<font-width-css3> = 
  normal |
  ultra-condensed |
  extra-condensed |
  condensed |
  semi-condensed |
  semi-expanded |
  expanded |
  extra-expanded |
  ultra-expanded

<system-family-name> = 
  caption |
  icon |
  menu |
  message-box |
  small-caption |
  status-bar

Примеры

Основное использование

В этом примере задаётся font для всех элементов <p>. Мы задаём font-size значение 12px, а line-height — значение 14px, разделяя их косой чертой (/). Это объявление также задаёт font-family значение sans-serif.

p {
  font: 12px / 14px sans-serif;
}

<p>
  This is a paragraph of sans-serif text. The font-size is small, at just 12px.
  If this text wraps, the line height is pretty tight at 14px, so this may be
  difficult to read.
</p>

Несколько свойств

В этом примере мы задаём font-weight значение bold, font-style — значение italic, font-size — значение large, line-height — значение 1.6, а font-family — значение serif.

p {
  font: bold italic large / 1.6 serif;
}

<p>
  In this example, we set the font weight to bold, the font style to italic, the
  font size to large, the line height to 1.6, and the font family to serif.
</p>

Системный шрифт

В этом примере показано, как задать системный шрифт с помощью свойства font.

CSS

Мы задаём для шрифта абзаца те же font-family, line-height, font-size и другие параметры, что и у строки состояния окна, а затем задаём line-height значение 1.6.

p {
  font: status-bar;
  line-height: 1.6;
}

HTML

В нашем HTML есть абзац (<p>) со ссылкой (<a>), значение атрибута href которой намеренно усложнено. При наведении указателя на отрисованную ссылку или перемещении на неё фокуса в строке состояния браузера должно отображаться значение атрибута href.

<p>
  <a
    href="/%20The%20font%20should%20be%20the%20same%20
family%20and%20size%20and%20the%20text%20in%20the%20example."
    >Hover or focus this text. The font should be the same family and size and
    the text in your status bar.</a
  >
</p>

JavaScript

Поскольку URL нашей HTML-ссылки задан не лучшим образом, мы добавляем скрипт, который не позволяет документу перенаправлять пользователя на несуществующую страницу при нажатии на ссылку.

const aElem = document.querySelector("a");
aElem.addEventListener("click", (e) => {
  e.preventDefault();
  return false;
});

Результат

Наведите указатель на ссылку или переведите на неё фокус. Семейство и размер шрифта должны совпадать с текстом в строке состояния в нижней части окна браузера.

Создание сокращённого объявления

В этой интерактивной демонстрации можно выбирать разные переключатели, чтобы создавать различные сокращённые значения и одновременно видеть эффект созданных объявлений.

<p>
  Change the radio buttons below to see the generated shorthand and its effect.
</p>
<form action="createShortHand()">
  <div class="cf">
    <div class="setPropCont">
      font-style<br />
      <input
        type="radio"
        id="font-style-none"
        name="font_style"
        checked
        value="" />
      <label for="font-style-none">omit value</label><br />
      <input
        type="radio"
        id="font-style-normal"
        name="font_style"
        value="normal" />
      <label for="font-style-normal">normal</label><br />
      <input
        type="radio"
        id="font-style-italic"
        name="font_style"
        value="italic" />
      <label for="font-style-italic">italic</label><br />
      <input
        type="radio"
        id="font-style-oblique"
        name="font_style"
        value="oblique" />
      <label for="font-style-oblique">oblique</label>
    </div>

    <div class="setPropCont">
      font-variant<br />
      <input
        type="radio"
        id="font-variant-none"
        name="font_variant"
        checked
        value=" " />
      <label for="font-variant-none">omit value</label><br />
      <input
        type="radio"
        id="font-variant-normal"
        name="font_variant"
        value="normal" />
      <label for="font-variant-normal">normal</label><br />
      <input
        type="radio"
        id="font-variant-small-caps"
        name="font_variant"
        value="small-caps" />
      <label for="font-variant-small-caps">small-caps</label>
    </div>

    <div class="setPropCont">
      font-weight<br />
      <input type="radio" id="font-weight-none" name="font_weight" value="" />
      <label for="font-weight-none">omit value</label><br />
      <input
        type="radio"
        id="font-weight-normal"
        checked
        name="font_weight"
        value="400" />
      <label for="font-weight-normal">normal</label><br />
      <input
        type="radio"
        id="font-weight-bold"
        name="font_weight"
        value="700" />
      <label for="font-weight-bold">bold</label>
    </div>

    <div class="setPropCont">
      font-size<br />
      <input type="radio" id="font-size-12px" name="font_size" value="12px" />
      <label for="font-size-12px">12px</label><br />
      <input
        type="radio"
        id="font-size-16px"
        name="font_size"
        value="16px"
        checked />
      <label for="font-size-16px">16px</label><br />
      <input type="radio" id="font-size-24px" name="font_size" value="24px" />
      <label for="font-size-24px">24px</label>
    </div>

    <div class="setPropCont">
      line-height<br />
      <input
        type="radio"
        id="line-height-none"
        name="line_height"
        checked
        value="" />
      <label for="line-height-none">omit value</label><br />
      <input
        type="radio"
        id="line-height-1-2"
        name="line_height"
        value="/1.2" />
      <label for="line-height-1-2">1.2</label><br />
      <input type="radio" id="line-height-3" name="line_height" value="/3" />
      <label for="line-height-3">3</label>
    </div>
    <br />

    <div class="setPropCont fontfamily">
      font-family<br />
      <input
        type="radio"
        id="font-family-courier"
        name="font_family"
        checked
        value="courier" />
      <label for="font-family-courier">courier</label><br />
      <input
        type="radio"
        id="font-family-serif"
        name="font_family"
        value="serif" />
      <label for="font-family-serif">serif</label><br />
      <input
        type="radio"
        id="font-family-sans-serif"
        name="font_family"
        value="sans-serif" />
      <label for="font-family-sans-serif">sans-serif</label><br />
      <input
        type="radio"
        id="font-family-arial"
        name="font_family"
        value="arial" />
      <label for="font-family-arial">Arial</label><br />
      <input
        type="radio"
        id="font-family-monospace"
        name="font_family"
        value="monospace" />
      <label for="font-family-monospace">monospace</label><br />
      <input
        type="radio"
        id="font-family-cursive"
        name="font_family"
        value="cursive" />
      <label for="font-family-cursive">cursive</label><br />
      <input
        type="radio"
        id="font-family-fantasy"
        name="font_family"
        value="fantasy" />
      <label for="font-family-fantasy">fantasy</label><br />
      <input
        type="radio"
        id="font-family-system-ui"
        name="font_family"
        value="system-ui" />
      <label for="font-family-system-ui">system-ui</label><br />
    </div>
  </div>

  <div class="cf propInputs">
    <div class="propInputCont tar">font :</div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input_font_style" /><br />
      font-style <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input_font_variant" /> <br />
      font-variant <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input_font_weight" /> <br />
      font-weight <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss mandatory" id="input_font_size" /> <br />
      font-size <br />
      mandatory
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss" id="input_line_height" /> <br />
      line-height <br />
      optional
    </div>
    <div class="propInputCont">
      <input type="text" class="curCss mandatory" id="input_font_family" />
      <br />
      font-family <br />
      mandatory
    </div>
  </div>
</form>

<div class="fontShortHand">
  This is some sample text.<br />
  This is some more sample text.
</div>

body,
input {
  font: 14px "Arial";
  overflow: hidden;
}

.propInputCont {
  float: left;
  text-align: center;
  margin-right: 5px;
  width: 80px;
}

.setPropCont {
  float: left;
  margin-right: 5px;
  width: 120px;
}

.propInputs,
.setPropCont {
  margin-bottom: 1em;
}

.curCss {
  border: none;
  border-bottom: 1px solid black;
  text-align: center;
  width: 80px;
}

.mandatory {
  border-bottom-color: red;
}

.cf::before,
.cf::after {
  content: " ";
  display: table;
}

.cf::after {
  clear: both;
}

.tar {
  width: 40px;
  text-align: right;
}
.fontfamily {
  display: inline-block;
}

const textAreas = document.getElementsByClassName("curCss");

function getProperties() {
  return (
    `${getCheckedValue("font_style")} ` +
    `${getCheckedValue("font_variant")} ` +
    `${getCheckedValue("font_weight")} ` +
    `${getCheckedValue("font_size")}` +
    `${getCheckedValue("line_height")} ` +
    `${getCheckedValue("font_family")}`
  );
}

function getCheckedValue(radioName) {
  const radios = document.forms[0].elements[radioName];
  for (const radio of radios) {
    if (radio.checked) {
      const curElemName = `input_${radioName}`;
      const curElem = document.getElementById(curElemName);
      curElem.value = radio.value;

      return radio.value;
    }
  }
}

function setCss() {
  injectCss(getProperties());
}

function injectCss(cssFragment) {
  const old = document.body.getElementsByTagName("style");
  if (old.length > 1) {
    old[1].parentElement.removeChild(old[1]);
  }
  css = document.createElement("style");
  css.textContent = `.fontShortHand{font: ${cssFragment}}`;
  document.body.appendChild(css);
}

setCss();

document.querySelectorAll("input[type='radio']").forEach((el) => {
  el.addEventListener("change", setCss);
});

Спецификации

Спецификация
Модуль CSS Fonts, уровень 4
# font-prop

Совместимость с браузерами

Компьютеры Мобильные устройства
Chrome Edge Firefox Opera Safari Chrome Android Firefox для Android Opera Android Safari на iOS Samsung Internet WebView Android WebView на iOS
font
1
12
1
3.5
1
18
4
14
1
1.0
4.4
1
caption
1
12
1
6
1
18
4
14
1
1.0
37
1
font-width_keyword_values
60
79
43
47
11
60
43
44
11
8.0
60
11
icon
1
12
1
6
1
18
4
14
1
1.0
37
1
menu
1
12
1
6
1
18
4
14
1
1.0
37
1
message-box
1
12
1
6
1
18
4
14
1
1.0
37
1
small-caption
1
12
1
6
1
18
4
14
1
1.0
37
1
status-bar
1
12
1
6
1
18
4
14
1
1.0
37
1

См. также

  • font-style
  • font-weight
  • Набор системных шрифтов на CSS-Tricks (2017)

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API