font-synthesis

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Januar 2022⁩.

* Some parts of this feature may have varying levels of support.

Die font-synthesis Kurzschreibweise CSS-Eigenschaft ermöglicht es Ihnen festzulegen, ob der Browser die fetten, kursiven, Kapitälchen- und/oder die Tief- und Hochstellungsschriftarten synthetisieren darf, wenn sie in der angegebenen Schriftfamilie fehlen.

Probieren Sie es aus

font-synthesis: weight style small-caps;

font-synthesis: none;

font-synthesis: weight;

font-synthesis: style;

font-synthesis: small-caps;

font-synthesis: position;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <p class="english">
      This font does not include <span class="bold">bold</span>,
      <span class="italic">italic</span>,
      <span class="small-caps">small-caps</span>, and
      <span class="sub">subscript</span> or
      <span class="sup">superscript</span> variants.
    </p>
    <p class="chinese">
      中文排版通常不运用<span class="bold">粗体</span>或<span class="italic"
        >斜体</span
      ><span class="sub">常不</span><span class="sup">运用</span>。
    </p>
  </div>
</section>

@font-face {
  font-family: "Oxygen";
  font-style: normal;
  font-weight: normal;
  src: url("https://fonts.gstatic.com/s/oxygen/v14/2sDfZG1Wl4LcnbuKjk0m.woff2")
    format("woff2");
}

/* [108] */
@font-face {
  font-family: "Ma Shan Zheng";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.108.woff2")
    format("woff2");
}
/* [110] */
@font-face {
  font-family: "Ma Shan Zheng";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.110.woff2")
    format("woff2");
}
/* [117] */
@font-face {
  font-family: "Ma Shan Zheng";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.117.woff2")
    format("woff2");
}
/* [118] */
@font-face {
  font-family: "Ma Shan Zheng";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.118.woff2")
    format("woff2");
}
/* [119] */
@font-face {
  font-family: "Ma Shan Zheng";
  font-style: normal;
  font-weight: normal;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/mashanzheng/v10/NaPecZTRCLxvwo41b4gvzkXaRMGEFoZJFdX0wQ5Xo5Hr21L9zCcRFhbSe5Nk0pIMuUkHEA.119.woff2")
    format("woff2");
}

.english {
  font-size: 1.2em;
  font-family: "Oxygen", sans-serif;
}

.chinese {
  font-size: 1.2em;
  font-family: "Ma Shan Zheng", cursive;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.small-caps {
  font-variant: small-caps;
}

.sub {
  font-variant: sub;
}

.sup {
  font-variant: super;
}

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

Syntax

css

/* none or one or more of the other keyword values */
font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: position;
font-synthesis: small-caps style; /* property values can be in any order */
font-synthesis: style small-caps weight position; /* property values can be in any order */

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

Werte

none: Gibt an, dass kein fetter, kursiver oder Kapitälchenschriftstil vom Browser synthetisiert werden darf.
weight: Gibt an, dass der fehlende fette Schriftstil vom Browser bei Bedarf synthetisiert werden darf.
style: Gibt an, dass der kursive Schriftstil vom Browser bei Bedarf synthetisiert werden darf.
small-caps: Gibt an, dass der Kapitälchenschriftstil vom Browser bei Bedarf synthetisiert werden darf.
position: Gibt an, dass der Tief- und Hochstellungsschriftstil vom Browser bei Bedarf synthetisiert werden darf, wenn font-variant-position verwendet wird.

Beschreibung

Die meisten standardmäßigen westlichen Schriftarten enthalten kursiv und fett Varianten, und einige Schriftarten enthalten auch eine Kapitälchen- und Tief-/Hochstellung-Varianten. Viele Schriftarten tun dies jedoch nicht. Schriftarten, die für Chinesisch, Japanisch, Koreanisch und andere logographische Schriften verwendet werden, neigen dazu, diese Varianten nicht zu enthalten, und deren Synthese könnte die Lesbarkeit beeinträchtigen oder die Bedeutung des Textes verändern. In diesen Fällen kann es wünschenswert sein, die standardmäßige Schriftarten-Synthese des Browsers auszuschalten.

Ein Beispiel hierfür wäre, wenn Sie die :lang() Pseudo-Klasse verwenden, um zu verhindern, dass der Browser fette und oblique Zeichen für eine Sprache synthetisiert, hier im Beispiel für Arabisch:

css

*:lang(ar) {
  font-synthesis: none;
}

Die nachstehende Tabelle zeigt, wie sich ein Wert der Kurzschreibweise font-synthesis-Eigenschaft auf die langen Eigenschaften abbildet.

font-synthesis Wert	font-synthesis-weight Wert	font-synthesis-style Wert	font-synthesis-small-caps Wert	font-synthesis-position Wert
`none`	`none`	`none`	`none`	`none`
`weight`	`auto`	`none`	`none`	`none`
`style`	`none`	`auto`	`none`	`none`
`small-caps`	`none`	`none`	`auto`	`none`
`position`	`none`	`none`	`none`	`auto`
`weight style`	`auto`	`auto`	`none`	`none`
`weight small-caps`	`auto`	`none`	`auto`	`none`
`weight position`	`auto`	`none`	`none`	`auto`
`style small-caps`	`none`	`auto`	`auto`	`none`
`style position`	`none`	`auto`	`none`	`auto`
`weight style small-caps`	`auto`	`auto`	`auto`	`none`
`weight style position`	`auto`	`auto`	`none`	`auto`
`weight small-caps position`	`auto`	`none`	`auto`	`auto`
`style small-caps position`	`none`	`auto`	`auto`	`auto`
`weight style small-caps position`	`auto`	`auto`	`auto`	`auto`

Formale Definition

Anfangswert	`weight style small-caps position`
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 = 
  none                                           |
  [ weight || style || small-caps || position ]

Beispiele

Deaktivieren der Schriftarten-Synthese

Dieses Beispiel zeigt das standardmäßige Verhalten der Schriftarten-Synthese des Browsers und vergleicht es damit, wenn das Syntheseverhalten ausgeschaltet ist. Beachten Sie, dass im Beispiel zwei importierte Schriftarten verwendet werden, um dieses Verhalten zu demonstrieren. Möglicherweise können Sie das Ausschalten der Schriftarten-Synthese bei Schriftarten, die standardmäßig auf Ihrem Betriebssystem verfügbar sind, nicht replizieren.

HTML

html

<pre> DEFAULT </pre>
<p class="english">
  This font supports <strong>bold</strong> and <em>italic</em>.
</p>
<p class="chinese">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>
<br />

<pre> SYNTHESIS IS DISABLED </pre>
<p class="english no-syn">
  This font supports <strong>bold</strong> and <em>italic.</em>
</p>
<p class="chinese no-syn">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>
<br />

<pre> SYNTHESIS IS ENABLED </pre>
<p class="english">
  This font supports <strong>bold</strong> and <em>italic</em>.
</p>
<p class="chinese syn">这个字体支持<strong>加粗</strong>和<em>斜体</em></p>

CSS

css

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

.english {
  font-family: "Montserrat", sans-serif;
}
.chinese {
  font-family: "Ma Shan Zheng", cursive;
}
.no-syn {
  font-synthesis: none;
}
.syn {
  font-synthesis: style weight;
}

Ergebnis

Spezifikationen

Specification
CSS Fonts Module Level 4 # font-synthesis

Browser-Kompatibilität

Siehe auch

Help improve MDN

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

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