font-feature-settings

Baseline Widely available

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

Die font-feature-settings CSS Eigenschaft steuert fortgeschrittene typografische Merkmale in OpenType-Schriften.

Probieren Sie es aus

font-feature-settings: normal;

font-feature-settings: "liga" 0;

font-feature-settings: "tnum";

font-feature-settings: "smcp", "zero";

<section id="default-example"> <div id="example-element"> <p>Difficult waffles</p> <table> <tr> <td><span class="tabular">0O</span></td> </tr> <tr> <td><span class="tabular">3.14</span></td> </tr> <tr> <td><span class="tabular">2.71</span></td> </tr> </table> </div> </section>

@font-face { font-family: "Fira Sans"; src: local("FiraSans-Regular"), url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; } section { font-family: "Fira Sans", sans-serif; margin-top: 10px; font-size: 1.5em; } #example-element table { margin-left: auto; margin-right: auto; } .tabular { border: 1px solid; }

Syntax

css

/* Use the default settings */ font-feature-settings: normal; /* Set values for OpenType feature tags */ font-feature-settings: "smcp"; font-feature-settings: "smcp" on; font-feature-settings: "swsh" 2; font-feature-settings: "smcp", "swsh" 2; /* Global values */ font-feature-settings: inherit; font-feature-settings: initial; font-feature-settings: revert; font-feature-settings: revert-layer; font-feature-settings: unset;

Wann immer möglich, sollten Web-Autoren stattdessen die Kurzschreibweise der Eigenschaft font-variant oder eine zugehörige ausführliche Eigenschaft wie font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric oder font-variant-position verwenden.

Diese führen zu effektiveren, vorhersagbaren und verständlicheren Ergebnissen als font-feature-settings, das eine niedrige Funktion ist, die für Sonderfälle entwickelt wurde, in denen es keine andere Möglichkeit gibt, ein OpenType-Schriftmerkmal zu aktivieren oder darauf zuzugreifen. Insbesondere sollte font-feature-settings nicht verwendet werden, um Kapitälchen zu aktivieren.

Werte

Diese Eigenschaft wird entweder mit dem Schlüsselwort normal oder als durch Kommas getrennte Liste von <feature-tag-value> Werten angegeben. Beim Rendern von Text wird die Liste der OpenType <feature-tag-value> Werte an die Text-Layout-Engine übergeben, um Schriftmerkmale zu aktivieren oder zu deaktivieren.

normal

Gibt an, dass Text unter Verwendung von Standard-Schrifteinstellungen layoutet wird. Dies ist der Standardwert.

<feature-tag-value>

Repräsentiert ein durch Leerzeichen getrenntes Tupel, das aus einem Tag-Namen und einem optionalen Wert besteht.

Der Tag-Name ist immer eine <string> aus vier ASCII Zeichen. Wenn der Tag-Name mehr oder weniger Zeichen hat oder Zeichen außerhalb des U+20 – U+7E Codepunktbereichs enthält, ist der Deskriptor ungültig.

Der optionale Wert kann eine positive Ganzzahl oder das Schlüsselwort on oder off sein. Die Schlüsselwörter on und off sind Synonyme für die Werte 1 und 0. Wenn kein Wert festgelegt ist, ist der Standard 1. Für nicht-boolesche OpenType-Merkmale (z.B. stylistic alternates) impliziert der Wert, dass ein bestimmtes Glyph gewählt wird; für boolesche Merkmale schaltet der Wert das Merkmal ein oder aus.

Formale Definition

Anfangswert	`normal`
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-feature-settings = 
 normal |
 <feature-tag-value># 

<feature-tag-value> = 
 <opentype-tag> [ <integer [0,∞]> | on | off ]? 

<opentype-tag> = 
 <string>

Beispiele

Aktivieren verschiedener Schriftmerkmale

css

/* use small-cap alternate glyphs */ .small-caps { font-feature-settings: "smcp" on; } /* convert both upper and lowercase to small caps (affects punctuation also) */ .all-small-caps { font-feature-settings: "c2sc", "smcp"; } /* use zeros with a slash through them to differentiate from "O" */ .nice-zero { font-feature-settings: "zero"; } /* enable historical forms */ .historical { font-feature-settings: "hist"; } /* disable common ligatures, usually on by default */ .no-ligatures { font-feature-settings: "liga" 0; } /* enable tabular (monospaced) figures */ td.tabular { font-feature-settings: "tnum"; } /* enable automatic fractions */ .fractions { font-feature-settings: "frac"; } /* use the second available swash character */ .swash { font-feature-settings: "swsh" 2; } /* enable stylistic set 7 */ .fancy-style { font-family: Gabriola, cursive; font-feature-settings: "ss07"; }

Spezifikationen

Specification
CSS Fonts Module Level 4 # font-feature-settings-prop

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