Свойство CSS `font-synthesis-style`

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

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

Синтаксис

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

/* 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

Указывает, что браузеру не разрешено синтезировать отсутствующее наклонное начертание.

oblique-only

То же, что и auto, но синтез шрифта не выполняется, если задано font-style: italic.

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

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

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 "https://fonts.googleapis.com/css2?family=Montserrat&display=swap";

.english {
  font-family: "Montserrat", sans-serif;
}

.no-syn {
  font-synthesis-style: none;
}

Результат

Сравнение значений font-synthesis-style

В этом примере сравниваются все значения font-synthesis-style с использованием текста курсивного и наклонного начертания.

HTML

<div class="fss-none">
  <h2>font-synthesis-style: none</h2>
  <p class="oblique">This text is set to <code>oblique</code></p>
  <p class="italic">This text is set to <code>italic</code></p>
</div>

<div class="fss-auto">
  <h2>font-synthesis-style: auto</h2>
  <p class="oblique">This text is set to <code>oblique</code></p>
  <p class="italic">This text is set to <code>italic</code></p>
</div>

<div class="fss-oblique-only">
  <h2>font-synthesis-style: oblique-only</h2>
  <p class="oblique">This text is set to <code>oblique</code></p>
  <p class="italic">This text is set to <code>italic</code></p>
</div>

CSS

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

p {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
}

@supports not (font-synthesis-style: oblique-only) {
  body::before {
    content: "Your browser doesn't support the 'oblique-only' value.";
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1rem 0;
  }
}

/* Specify style of the font synthesis */
.fss-none {
  font-synthesis-style: none;
}

.fss-auto {
  font-synthesis-style: auto;
}

.fss-oblique-only {
  font-synthesis-style: oblique-only;
}

/* Set font styles */
.oblique {
  font-style: oblique;
}

.italic {
  font-style: italic;
}

/* Styles for the demonstration */
.oblique::after {
  content: " (font-style: oblique)";
  font-size: 0.8rem;
  vertical-align: sub;
}

.italic::after {
  content: " (font-style: italic)";
  font-size: 0.8rem;
  vertical-align: sub;
}

Результат

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

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

См. также

• Сокращённое свойство font-synthesis, font-synthesis-small-caps, font-synthesis-weight
• font-style, font-variant, font-weight