Шрифт-стиль

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

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

Свойство font-style CSS устанавливает, следует ли стилизовать шрифт с обычным, курсивным или наклонным начертанием из его font-family.

Попробуйте

Курсивные начертания шрифтов обычно имеют курсивный характер, занимают обычно меньше горизонтального пространства, чем их нестилизованные аналоги, в то время как наклонные начертания обычно являются просто наклоненными версиями обычного начертания. Если указанный стиль недоступен, как курсивные, так и наклонные начертания моделируются путем искусственного наклона глифов обычного начертания (используйте font-synthesis, чтобы управлять этим поведением).

Синтаксис

font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;

/* Global values */
font-style: inherit;
font-style: initial;
font-style: revert;
font-style: revert-layer;
font-style: unset;

Свойство font-style задается одним ключевым словом из списка значений ниже, которое может необязательно включать угол, если ключевое слово oblique.

Значения

normal

Выбирает шрифт, классифицированный как normal в font-family.

italic

Выбирает шрифт, классифицированный как italic. Если нет версии шрифта курсивом, используется версия, классифицированная как oblique. Если ни то, ни другое недоступно, стиль моделируется искусственно.

oblique

Выбирает шрифт, классифицированный как oblique. Если нет наклонной версии шрифта, используется версия, классифицированная как italic. Если ни то, ни другое недоступно, стиль моделируется искусственно.

oblique <angle>

Выбирает шрифт, классифицированный как oblique, и дополнительно задает угол наклона текста. Если в выбранном семействе шрифтов есть один или несколько наклонных начертаний, выбирается тот, который наиболее точно соответствует заданному углу. Если наклонные начертания недоступны, браузер создаст наклонную версию шрифта, наклонив обычное начертание на указанный угол. Допустимые значения — значения углов от -90deg до 90deg включительно. Если угол не указан, используется угол 14 градусов. Положительные значения наклоняют текст к концу строки, а отрицательные — к началу.

В целом, для запрошенного угла 14 градусов или более, предпочитаются большие углы; в противном случае предпочтительны меньшие углы (см. раздел сопоставления шрифтов спецификации здесь для точного алгоритма).

Переменные шрифты

Переменные шрифты могут обеспечить точный контроль над степенью наклона наклонного начертания. Вы можете выбрать это, используя модификатор <angle> для ключевого слова oblique.

Для переменных шрифтов TrueType или OpenType используется изменение "slnt" для реализации различных углов наклона для наклонного начертания, и изменение "ital" со значением 1 используется для реализации курсивных значений. См. font-variation-settings.

Нажмите «Воспроизвести» в блоках кода ниже, чтобы изменить пример в Playground MDN. Измените значение угла, чтобы увидеть, как изменится наклон текста.

<p class="sample">
  ...it would not be wonderful to meet a Megalosaurus, forty feet long or so,
  waddling like an elephantine lizard up Holborn Hill.
</p>

@font-face {
  src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
  font-family: "AmstelvarAlpha";
  font-style: normal;
}

.sample {
  font:
    2rem "AmstelvarAlpha",
    sans-serif;
  /*font-variation-settings: "slnt" 12;*/
  font-style: oblique 23deg;
}

Доступность

Большие блоки текста, установленные со значением font-style italic, могут быть трудны для чтения людям с когнитивными нарушениями, такими как дислексия.

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

Начальное значение	`normal`
Применимо к	всем элементам и тексту. Он также применяется к `::first-letter` и `::first-line`.
Наследуется	да
Вычисленное значение	как указано
Тип анимации	по типу вычисленного значения; `normal` анимируется как `oblique 0deg`

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

font-style = 
  normal                           |
  italic                           |
  oblique <angle [-90deg,90deg]>?

Примеры

Стили шрифтов

.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}

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

Спецификация
CSS Fonts Module Level 4 # font-style-prop

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

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`font-style`	1	12	1 До Firefox 44, `oblique` не отличался от `italic`.	7	1	18	4 До Firefox 44, `oblique` не отличался от `italic`.	10.1	1	1.0	4.4
`italic`	1	12	1	15	1	18	4	14	1	1.0	4.4
`normal`	1	12	1	15	1	18	4	14	1	1.0	4.4
`oblique-angle`	62	79	61	49	11.1	62	61	46	11.3	8.0	62

См. также

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