font-synthesis-small-caps CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2023 browserübergreifend verfügbar.
Die font-synthesis-small-caps CSS-Eigenschaft ermöglicht es, anzugeben, ob der Browser die Kleinbuchstaben eines Schriftsatzes synthetisieren darf, wenn sie in einer Schriftfamilie fehlen. Kleinbuchstaben verwenden typischerweise die Form von Großbuchstaben, sind jedoch auf die Größe von Kleinbuchstaben reduziert.
Es ist oft praktisch, die Kurzschreibweise font-synthesis zu verwenden, um alle Werte der Schrifttypensynthese zu steuern.
Syntax
/* 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
Diese Eigenschaft wird als eines der folgenden Schlüsselwortwerte angegeben:
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-small-caps =
auto |
none
Beispiele
Deaktivieren der Synthese des Kleinbuchstabenschnitts
Dieses Beispiel zeigt, wie die Synthese des Kleinbuchstabenschnitts durch den Browser in der Schriftart Montserrat ausgeschaltet wird.
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
@import "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
| Spezifikation |
|---|
| CSS Fonts Module Level 4 # font-synthesis-small-caps |