font-synthesis-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨März 2023⁩.

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

Es ist oft praktisch, die Kurzschreibweiseigenschaft font-synthesis zu verwenden, um alle Werte der Schrifterzeugung 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 synthetisiert werden darf, wenn nötig.
none: Gibt an, dass die Erzeugung des fehlenden obliquen Schriftschnitts durch den Browser nicht erlaubt ist.
oblique-only: Entspricht auto, aber es erfolgt keine Schrifterzeugung, wenn font-style: italic gesetzt ist.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	all elements and text. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	diskret

Formale Syntax

font-synthesis-style = 
  auto          |
  none          |
  oblique-only

Beispiele

Deaktivierung der Erzeugung von obliquen Schriftschnitten

In diesem Beispiel wird gezeigt, wie die Erzeugung des obliquen Schriftschnitts des Browsers 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 "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

In diesem Beispiel werden alle font-synthesis-style Werte unter Verwendung von kursiven und obliquen Texten verglichen.

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

@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: #ffcd33;
    display: block;
    width: 100%;
    text-align: center;
  }
}

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

font-synthesis Kurzschreibweise, font-synthesis-small-caps, font-synthesis-weight
font-style, font-variant, font-weight

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden