font-synthesis-style

Baseline 2023
Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die font-synthesis-style CSS Eigenschaft ermöglicht es Ihnen zu spezifizieren, ob der Browser den oblique Schriftschnitt synthetisieren darf, wenn er in einer Schriftfamilie fehlt.

Es ist oft bequem, die Kurzschreibweise font-synthesis zu verwenden, um alle Typenschnitt-Synthesewerte zu steuern.

Syntax

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

Werte

auto

Gibt an, dass der fehlende oblique Schriftschnitt bei Bedarf vom Browser synthetisiert werden darf.

none

Gibt an, dass das Synthetisieren des fehlenden oblique Schriftschnitts durch den Browser nicht erlaubt ist.

Formale Definition

Anfangswertauto
Anwendbar aufall elements and text. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

font-synthesis-style = 
auto |
none

Beispiele

Deaktivierung der Synthese des obliquen Schriftschnitts

Dieses Beispiel zeigt, wie die Synthese des obliquen Schriftschnitts durch den Browser in der Montserrat Schriftart deaktiviert wird.

HTML

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

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

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

Ergebnis

Spezifikationen

Specification
CSS Fonts Module Level 4
# font-synthesis-style

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-synthesis-style
auto
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch