`font-feature-settings` CSS property

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2017 browserübergreifend verfügbar.

Die font-feature-settings CSS-Eigenschaft steuert erweiterte 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>
      <tbody>
        <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>
      </tbody>
    </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;

Wo immer möglich, sollten Web-Autoren stattdessen die Abkürzungseigenschaft 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, vorhersehbareren und verständlicheren Ergebnissen als font-feature-settings, das ein Low-Level-Feature ist, das dazu gedacht ist, Spezialfälle zu handhaben, bei 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 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 weitergegeben, um Schriftmerkmale zu aktivieren oder zu deaktivieren.

normal

Gibt an, dass der Text mit den standardmäßigen Schrifteinstellungen ausgelegt wird. Dies ist der Standardwert.

<feature-tag-value>

Repräsentiert ein Leerzeichen-getrenntes Tupel bestehend aus einem Tag-Namen und einem optionalen Wert.

Tag-Name: 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 des U+20 - U+7E Codepunktbereichs, ist der Deskriptor ungültig.
Optionaler Wert: 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 bzw. 0. Wenn kein Wert gesetzt ist, ist der Standardwert 1. Für nicht-boolean OpenType-Merkmale (z.B. stylistic alternates) impliziert der Wert die Auswahl eines bestimmten Glyphe; bei boolean-Merkmalen 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>  

<integer> = 
  <number-token>

Beispiele

Aktivierung 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

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

font-feature-settings CSS property

Help improve MDN

`font-feature-settings` CSS property