font-synthesis-small-caps

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-small-caps-Eigenschaft von CSS ermöglicht es Ihnen, festzulegen, ob der Browser Kleinbuchstaben in Versalien generieren darf, wenn sie in einer Schriftfamilie fehlen. Kleinbuchstaben verwenden typischerweise die Form von Großbuchstaben, sind aber auf die Größe von Kleinbuchstaben reduziert.

Oft ist es praktisch, die Kurzschreibweiseigenschaft font-synthesis zu verwenden, um alle Werte für die Schriftartensynthese zu steuern.

Syntax

css
/* Keyword values */
font-synthesis-small-caps: auto;
font-synthesis-small-caps: none;

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

Werte

auto

Gibt an, dass die fehlenden Kleinbuchstaben vom Browser bei Bedarf synthetisiert werden können.

none

Gibt an, dass die Synthese der fehlenden Kleinbuchstaben 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-small-caps = 
  auto  |
  none

Beispiele

Deaktivieren der Synthese von Kleinbuchstaben

Dieses Beispiel zeigt, wie die Synthese von Kleinbuchstaben durch den Browser in der Schrift Montserrat deaktiviert wird.

HTML

html
<p class="english">
  These are the default <span class="small-caps">small-caps</span>,
  <strong>bold</strong>, and <em>oblique</em> typefaces.
</p>

<p class="english no-syn">
  The <span class="small-caps">small-caps</span> typeface is turned off here but
  not the <strong>bold</strong> and <em>oblique</em> typefaces.
</p>

CSS

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

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

Ergebnis

Spezifikationen

Specification
CSS Fonts Module Level 4
# font-synthesis-small-caps

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch