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 erweiterte typografische Funktionen 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
/* 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 font-variant
oder eine zugehörige Langform-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, vorhersehbaren und verständlicheren Ergebnissen als font-feature-settings
, welches eine Low-Level-Funktion ist, die entwickelt wurde, um spezielle Fälle zu bearbeiten, in denen es keine andere Möglichkeit gibt, eine OpenType-Schriftfunktion zu aktivieren oder darauf zuzugreifen. Insbesondere sollte font-feature-settings
nicht verwendet werden, um Kapitälchen zu aktivieren.
Werte
Diese Eigenschaft wird entweder als Schlüsselwort normal
oder als kommagetrennte Liste von <feature-tag-value>
Werten angegeben. Beim Rendern von Text wird die Liste der OpenType <feature-tag-value>
Werte an die Textlayout-Engine übergeben, um Schriftfunktionen zu aktivieren oder zu deaktivieren.
normal
-
Gibt an, dass der Text mit den standardmäßigen Schriftarteinstellungen layoutet wird. Dies ist der Standardwert.
<feature-tag-value>
-
Stellt ein leerzeichengetrenntes Tupel dar, das aus einem Tag-Namen und einem optionalen Wert besteht.
Der Tag-Name ist immer ein
<string>
aus vier ASCII Zeichen. Hat der Tag-Name mehr oder weniger Zeichen oder enthält er Zeichen außerhalb desU+20
–U+7E
Codepunktbereichs, ist der Deskriptor ungültig.Der optionale Wert kann eine positive ganze Zahl oder das Schlüsselwort
on
oderoff
sein. Die Schlüsselwörteron
undoff
sind Synonyme für die Werte1
und0
. Wenn kein Wert gesetzt ist, ist der Standardwert1
. Für nicht-boole'sche OpenType-Funktionen (z. B. stilistische Alternativen) impliziert der Wert die Auswahl eines bestimmten Glyphe; bei booleschen Funktionen schaltet der Wert die Funktion 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
Beispiele
Aktivieren verschiedener Schriftfunktionen
/* 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;
font-feature-settings: "ss07";
}
Spezifikationen
Specification |
---|
CSS Fonts Module Level 4 # font-feature-settings-prop |
Browser-Kompatibilität
BCD tables only load in the browser