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 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 Webautoren stattdessen die font-variant Kurzform-Eigenschaft 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 eine Low-Level-Funktion ist, die speziell für Fälle gedacht ist, 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 durch das 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 Text-Layout-Engine übergeben, um Schriftmerkmale zu aktivieren oder zu deaktivieren.

normal

Gibt an, dass der Text mit den standardmäßigen Schriftarten-Einstellungen angezeigt 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 ein <string> von vier ASCII Zeichen. Wenn der Tag-Name mehr oder weniger Zeichen hat oder Zeichen außerhalb des U+20 – U+7E Codepoint-Bereichs enthält, ist der Deskriptor ungültig.

Der optionale Wert kann eine positive ganze Zahl 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. stylistische Alternativen) impliziert der Wert die Auswahl eines bestimmten Glyphen; für boolesche Merkmale aktiviert oder deaktiviert der Wert das Merkmal.

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>#

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

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