font-synthesis-style

Стиль синтеза шрифтов 2023

Новое

С марта 2023 года эта функция работает на последних устройствах и версиях браузеров. Возможно, эта функция не будет работать на старых устройствах или браузерах.

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

Часто удобно использовать сокращенное свойство font-synthesis для управления всеми значениями синтеза шрифтов.

Синтаксис

/* Keyword values */
font-synthesis-style: auto;
font-synthesis-style: none;

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

Значения

auto: Указывает, что браузер может синтезировать отсутствующий наклонный шрифт при необходимости.
none: Указывает, что синтез отсутствующего наклонного шрифта браузером запрещён.

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

Начальное значение	`auto`
Применимо к	всем элементам и тексту. Также применимо к `::first-letter` и `::first-line`.
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

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

font-synthesis-style = 
  auto  |
  none

Примеры

Отключение синтеза наклонного шрифта

Этот пример показывает отключение синтеза наклонного шрифта браузером для шрифта Montserrat.

HTML

<p class="english">
  This is the default <em>oblique typeface</em> and
  <strong>bold typeface</strong>.
</p>

<p class="english no-syn">
  The <em>oblique typeface</em> is turned off here but not the
  <strong>bold typeface</strong>.
</p>

CSS

@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

.english {
  font-family: "Montserrat", sans-serif;
}
.no-syn {
  font-synthesis-style: none;
}

Результат

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

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

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`font-synthesis-style`	97	97	111	83	16.4	97	111	68	16.4	18.0	97
`auto`	97	97	111	83	16.4	97	111	68	16.4	18.0	97
`none`	97	97	111	83	16.4	97	111	68	16.4	18.0	97

См. также

font-synthesis сокращение, font-synthesis-small-caps, font-synthesis-weight
font-style, font-variant, font-weight

© 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-synthesis-style