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 anzugeben, ob der Browser einen obliquen Schriftschnitt synthetisieren darf, wenn dieser in einer Schriftfamilie fehlt.

Es ist oft praktisch, die Kurzschreibweiseigenschaft font-synthesis zu verwenden, um alle Werte der Schriftschnitt-Synthese zu steuern.

Syntax

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

Werte

auto

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

none

Gibt an, dass die Synthese des fehlenden obliquen Schriftschnitts durch den Browser nicht erlaubt ist.

oblique-only

Dasselbe wie auto, aber keine Schriftsynthese tritt auf, wenn font-style: italic gesetzt 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          |
  oblique-only

Beispiele

Deaktivieren der Synthese des obliquen Schriftschnitts

Dieses Beispiel zeigt, wie die Synthese des obliquen Schriftschnitts durch den Browser in der Montserrat-Schrift 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

Vergleich der font-synthesis-style Werte

Dieses Beispiel vergleicht alle font-synthesis-style-Werte mit kursiven und oblique formatierten Texten.

HTML

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

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

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

Siehe auch