CSS font-feature-settings Eigenschaft
Die CSS-Eigenschaft font-feature-settings steuert erweiterte typografische Funktionen in OpenType-Schriften. Eigenschaft und Beispiele erklärt.
Die Eigenschaft font-feature-settings gibt Ihnen eine direkte Kontrolle über die erweiterten typografischen Funktionen, die in OpenType-Schriften eingebaut sind — Dinge wie Kapitälchen, Mediävalziffern, Ligaturen, Brüche und stilistische Alternativen. Diese Funktionen werden vom Schriftdesigner entworfen und in der Schriftdatei gespeichert; font-feature-settings ist der Schalter, der sie ein- oder ausschaltet.
Der Wert ist entweder das Schlüsselwort normal (der Standard) oder eine kommagetrennte Liste von <feature-tag-value>-Paaren. Jedes Paar ist ein vierstelliger OpenType-Feature-Tag, der als Zeichenkette geschrieben wird und optional von einem Wert gefolgt wird:
font-feature-settings: "smcp" 1; /* enable small caps */
font-feature-settings: "smcp" on; /* same thing — "on" means 1 */
font-feature-settings: "smcp", "onum"; /* two features, omitted value defaults to 1 */
font-feature-settings: "liga" 0; /* disable standard ligatures */Die Schlüsselwörter on und off sind Synonyme für 1 und 0. Die meisten Funktionen sind einfache Ein/Aus-Schalter, aber einige (wie stilistische Sets oder Zeichenvarianten) akzeptieren eine größere Ganzzahl, um eine bestimmte Variante auszuwählen. Die Funktion hat nur dann eine sichtbare Wirkung, wenn die gerenderte Schrift diese Funktion tatsächlich enthält — falls die Schrift sie nicht hat, wird die Deklaration stillschweigend ignoriert.
Wann verwenden (und wann nicht)
font-feature-settings ist der Notausgang. Für gängige Bedürfnisse bevorzugen Sie die übergeordnete font-variant-Kurzschreibweise und ihre Untereigenschaften (font-variant-caps, font-variant-numeric, font-variant-ligatures, …). Diese sind leichter lesbar, werden sauber vererbt und bieten einen eleganten Rückfall:
/* Preferred — high-level and readable */
font-variant-caps: small-caps;
/* Low-level equivalent — only when the font has no friendlier path */
font-feature-settings: "smcp";Greifen Sie auf font-feature-settings nur zurück, wenn Sie eine Funktion benötigen, die kein eigenes font-variant-Schlüsselwort besitzt — zum Beispiel ein schriftspezifisches stilistisches Set ("ss01") oder eine diskretionäre Funktion, die die Schrift per Tag bereitstellt.
Ein wichtiger Fallstrick: font-feature-settings ist alles oder nichts. Da die gesamte Liste jeden vererbten Wert ersetzt, setzt eine erneute Deklaration auf einem Kindelement alle auf dem Elternelement gesetzten Funktionen zurück. Halten Sie alle aktiven Tags in einer einzigen Deklaration zusammen, anstatt sie auf mehrere Regeln zu verteilen.
Häufige OpenType-Feature-Tags
| Tag | Funktion | Typische Verwendung |
|---|---|---|
smcp | Kapitälchen | Kleinbuchstaben als kleine Großbuchstaben darstellen. |
c2sc | Großbuchstaben zu Kapitälchen | Großbuchstaben ebenfalls in Kapitälchen umwandeln. |
liga | Standardligaturen | Buchstabenpaare wie fi, fl verbinden (standardmäßig aktiviert; mit 0 deaktivieren). |
dlig | Diskretionäre Ligaturen | Dekorative Ligaturen wie ct, st. |
onum | Mediävalziffern | Ziffern mit Ober-/Unterlängen, die im Fließtext stehen. |
lnum | Versalziffern | Ziffern einheitlicher Höhe, ausgerichtet an der Versalhöhe. |
tnum | Tabellenziffern | Ziffern mit fester Breite für Zahlenspalten. |
frac | Brüche | 1/2 als typografischen Bruch formatieren. |
kern | Kerning | Abstände zwischen bestimmten Buchstabenpaaren anpassen. |
swsh | Schwünge | Dekorative Verzierungen an Glyphen. |
Die Browser-Unterstützung ist in modernen Browsern hervorragend, aber für ältere Browser-Engines sind möglicherweise noch die mit -webkit-, -moz- und -ms- präfixierten Versionen dieser Eigenschaft zu verwenden.
| Anfangswert | normal |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbt | Ja. |
| Animierbar | Nein. |
| Version | CSS3 |
| DOM-Syntax | object.style.fontFeatureSettings = "normal"; |
Syntax
Syntax der CSS font-feature-settings Eigenschaft
font-feature-settings: normal | <feature-tag-value># | initial | inherit;Beispiel der font-feature-settings Eigenschaft:
Beispiel der CSS font-feature-settings Eigenschaft mit dem smcp-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
font-family: sans-serif;
}
h3 {
font-feature-settings: "smcp" 1;
}
</style>
</head>
<body>
<h2>Font-feature-settings example</h2>
<h3>The font-feature-settings CSS property controls advanced typographic features in OpenType fonts.</h3>
</body>
</html>Beispiel mit mehreren Funktionen
Sie können mehrere Funktionen gleichzeitig mit einer kommaseparierten Liste aktivieren. Hier aktivieren wir Mediävalziffern und deaktivieren Standardligaturen auf demselben Element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-feature-settings: "onum" 1, "liga" 0;
}
</style>
</head>
<body>
<p>Order 1234567890 ships in office. </p>
</body>
</html>Beachten Sie, dass sich die Ziffern nur ändern, wenn die gewählte Schrift Mediävalziffern enthält. Wenn einer Schrift eine Funktion fehlt, hat dieser Teil der Deklaration keine Wirkung.
Werte
| Wert | Beschreibung |
|---|---|
| normal | Dies ist der Standardwert dieser Eigenschaft. |
<feature-tag-value> | Beim Rendern von Text wird die Liste der OpenType-Feature-Tag-Werte an die Textlayout-Engine übergeben, um Schriftfunktionen zu aktivieren oder zu deaktivieren. |
| initial | Setzt die Eigenschaft auf ihren Standardwert. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Verwandte Eigenschaften
- font-variant — die übergeordnete Kurzschreibweise, die bei Kapitälchen, Ligaturen und numerischen Ziffern die erste Wahl sein sollte.
- font-family — eine Schrift auswählen, die tatsächlich die OpenType-Funktionen enthält, die Sie aktivieren möchten.
- text-transform — ändert die Groß-/Kleinschreibung der Zeichen selbst, im Gegensatz zu Kapitälchen, die nur das Erscheinungsbild ändern.
- letter-spacing — Abstände zwischen Zeichen auf Layout-Ebene anpassen, anstatt über Schrift-Kerning.