Auf dieser Seite beschreiben wir jedes einzelne OpenType-Merkmal und geben konkrete Beispiele für die Verwendung der Syntax. Eine allgemeine Übersicht zur Aktivierung der OpenType-Merkmale in Ihren Webprojekten und die Verwendung in CSS finden Sie in unserem Hilfedokument Verwenden von OpenType-Merkmalen in CSS.

Allgemeine/Standard-Ligaturen (liga)

Beispiel für Ligaturen in Aktion, gesetzt in Warnock Pro

Beispiel für die Anwendung des liga-CSS

Dieses Merkmal ersetzt eine Abfolge von Glyphen durch eine einzige Glyphe, eine so genannte Ligatur, die aus typografischen Gründen bevorzugt wird. Wenn diese Funktion aktiviert ist, fügt sie die Ligaturen ein, die nach Meinung des Designers/Herstellers unter normalen Bedingungen verwendet werden sollten.

Das Merkmal „Ligaturen“ ist in der Standardeinstellung aktiviert. Dies bedeutet, es sollte korrekt dargestellt werden, ohne dass Sie ein CSS schreiben müssen. Allerdings ist die Einstellung in Chrome nicht standardmäßig aktiviert. Darüber hinaus kann sie in Safari (Mac oder iOS) nicht deaktiviert werden. Und einige Versionen von Chrome und Firefox haben Probleme mit Ligaturen, die Leerzeichen enthalten.

.class {
  font-variant-ligatures: common-ligatures;
  -moz-font-feature-settings: "liga", "clig";
  -webkit-font-feature-settings: "liga", "clig";
  font-feature-settings: "liga", "clig";
}

Um Ligaturen mit der Eigenschaft font-variant oder der Untereigenschaft font-variant-ligatures zu aktivieren, verwenden Sie den Wert „common-ligatures“, der sowohl allgemeine als auch kontextbedingte Ligaturen aktiviert. Wie kontextbedingte Alternativen verfügen kontextbedingte Ligaturen über eine integrierte bedingte Logik, die Ersatz-Glyphen nur in spezifischen Situationen anwendet. Um denselben Effekt mit „font-feature-settings“ zu erzielen, verwenden Sie die beiden Merkmal-Tags „liga“ und „clig“. Weitere Informationen finden Sie unter Syntax zur Verwendung mehrerer OpenType-Merkmale.

.class {
  font-variant-ligatures: no-common-ligatures;
  -moz-font-feature-settings: "liga" 0, "clig" 0;
  -webkit-font-feature-settings: "liga" 0, "clig" 0;
  font-feature-settings: "liga" 0, "clig" 0;
}

Um dieses Merkmal zu deaktivieren, verwenden Sie den Wert no-comon-ligatures und einen numerischen Index von null für font-feature-settings.

Kontextbedingte Alternativen (calt)

Beispiel für kontextbedingte Alternativen in Aktion, gesetzt in Caflisch Script Pro

Beispiel für die Anwendung des calt-CSS

Dieses Merkmal ersetzt in bestimmten Situationen Standard-Glyphen durch alternative Formen, die ein besseres Fügeverhalten aufweisen. Wie Ligaturen (auch wenn es sich strikt betrachtet nicht um ein Ligatur-Merkmal handelt) werden kontextbedingte Alternativen in der Regel verwendet, um die Formen der Glyphen mit dem umgebenden Kontext zu harmonisieren.

Das Merkmal „kontextbedingte Alternativen“ ist in der Standardeinstellung aktiviert. Dies bedeutet, es sollte korrekt dargestellt werden, ohne dass Sie ein CSS schreiben müssen. Allerdings ist die Einstellung in Chrome nicht standardmäßig aktiviert. Darüber hinaus kann sie in Safari (Mac oder iOS) nicht deaktiviert werden.

.class {
    font-variant-ligatures: contextual;
    -moz-font-feature-settings: "calt";
    -webkit-font-feature-settings: "calt";
    font-feature-settings: "calt";
}

Um dieses Merkmal mit der Eigenschaft font-variant oder der Untereigenschaft font-variant-ligatures zu aktivieren, verwenden Sie den Wert „contextual“. Um denselben Effekt mit „font-feature-settings“ zu erzielen, verwenden Sie das Merkmal-Tag „calt“.

.class {
    font-variant-ligatures: no-contextual;
    -moz-font-feature-settings: "calt" 0;
    -webkit-font-feature-settings: "calt" 0;
    font-feature-settings: "calt" 0;
}

Um dieses Merkmal zu deaktivieren, verwenden Sie den Wert no-contecutal und einen numerischen Index von null für font-feature-settings.

Bedingte Ligaturen (dlig)

Beispiel für bedingte Ligaturen in Aktion, gesetzt in Warnock Pro

Beispiel für die Anwendung des dlig-CSS

Dieses Merkmal ersetzt eine Abfolge von Glyphen durch eine einzige Glyphe (eine Ligatur), die aus typografischen Gründen bevorzugt wird. Wenn dieses Merkmal aktiviert ist, fügt sie diese Ligaturen ein, die für Spezialeffekte verwendet werden können.

.class {
  font-variant-ligatures: discretionary-ligatures;
  -moz-font-feature-settings: "dlig";
  -webkit-font-feature-settings: "dlig";
  font-feature-settings: "dlig";
}

Das Merkmal „Bedingte Ligaturen“ ist in der Standardeinstellung deaktiviert.

Um dieses Merkmal mit der Eigenschaft font-variant oder der Untereigenschaft font-variant-ligatures zu aktivieren, verwenden Sie den Wert discretionary-ligatures. Um denselben Effekt mit font-feature-settings zu erzielen, verwenden Sie das Merkmal-Tag „dlig“.

Kapitälchen (smcp)

Beispiel für Kapitälchen in Aktion, gesetzt in Warnock Pro

Beispiel für die Anwendung des smcp-CSS

Dieses Merkmal wandelt Kleinbuchstaben in Kapitälchen um.

.class {
  font-variant-caps: small-caps;
  -moz-font-feature-settings: "smcp";
  -webkit-font-feature-settings: "smcp";
  font-feature-settings: "smcp";
}

Das Merkmal „Kapitälchen“ ist in der Standardeinstellung deaktiviert.

Um dieses Merkmal mit der Eigenschaft font-variant oder der Untereigenschaft font-variant-caps zu aktivieren, verwenden Sie den Wert small-caps. Um denselben Effekt mit font-feature-settings zu erzielen, verwenden Sie das Merkmal-Tag „smcp“.

Beachten Sie, dass das Merkmal „Kapitälchen“ bei einigen Schriftarten über andere Formen verfügt. Nach der OpenType-Spezifikation kann das OpenType-Merkmal smcp „Formen enthalten, die mit Kapitälchen verwandt sind, beispielsweise Mediävalzahlen“.

Kapitälchen von Großbuchstaben (c2sc)

Beispiel für den Übergang von Großbuchstaben zu Kapitälchen in Aktion, gesetzt in Warnock Pro

Beispiel für die Anwendung des c2sc-CSS

Dieses Merkmal wandelt Großbuchstaben in Kapitälchen um.

.class {
  font-variant-caps: all-small-caps;
  -moz-font-feature-settings: "c2sc", "smcp";
  -webkit-font-feature-settings: "c2sc", "smcp";
  font-feature-settings: "c2sc", "smcp";
}

Das Merkmal „Kapitälchen von Großbuchstaben“ ist in der Standardeinstellung deaktiviert.

Um dieses Merkmal mit der Eigenschaft font-variant oder der Untereigenschaft font-variant-caps zu aktivieren, verwenden Sie den Wert all-small-caps, wodurch sowohl Zeichen in Großschreibung als auch Zeichen in Kleinschreibung in Kapitälchen umgewandelt werden. Dieses Verhalten ist sinnvoll, da Sie in der Praxis nur selten ausschließlich Großbuchstaben in Kapitälchen umwandeln werden. Um denselben Effekt mit font-feature-settings zu erzielen, verwenden Sie die beiden Merkmal-Tags „c2sc“ und „smcp“. Weitere Informationen finden Sie unter Syntax zur Verwendung mehrerer OpenType-Merkmale.

Schwungbuchstaben (swsh)

Beispiel für Schwungbuchstaben in Aktion, gesetzt in Bickham Script Pro 3

Beispiel für die Anwendung des swsh-CSS

Dieses Merkmal ersetzt die Standard-Glyphen im Zeichensatz durch entsprechende Schwungbuchstaben-Glyphen.

.class {
  -moz-font-feature-settings: "swsh";
  -webkit-font-feature-settings: "swsh";
  font-feature-settings: "swsh";
}

Das Merkmal „Schwungbuchstaben“ ist in der Standardeinstellung deaktiviert.

Um dieses Merkmal mit ont-feature-settings zu aktivieren, verwenden Sie das Merkmal-Tag „swsh“. Beachten Sie, dass es für ein bestimmtes Zeichen mehrere Schwungbuchstaben-Alternativen geben kann. Um auf alternative Schwungbuchstaben zuzugreifen, fügen Sie einen numerischen Index zum Wert hinzu:

.class {
  -moz-font-feature-settings: "swsh" 2;
  -webkit-font-feature-settings: "swsh" 2;
  font-feature-settings: "swsh" 2;
}

Dies würde den zweiten verfügbaren Schwungbuchstaben aktivieren, sofern er in der Schrift vorhanden ist. Wie Sie wahrscheinlich vermuten, entspricht ein Wert von „swsh“, wie im ersten Codebeispiel verwendet, der Verwendung eines Werts von „swsh“ 1.

Fürs Erste überspringen wir die Eigenschaft font-variant, da ihre „benannten“ Werte (wie z. B. swash (flowing)) von font-feature-value-CSS-Definitionen numerischen Schwungbuchstaben-Indizes zugeordnet werden, die noch nicht von allen wichtigen Browsern unterstützt werden.

Stilistische Alternativen (salt)

Beispiel für Schwungbuchstaben in Aktion, gesetzt in Bree

Beispiel für die Anwendung des salt-CSS

Dieses Merkmal ersetzt die Standard-Glyphen im Zeichensatz durch stilistische Alternativen. Siehe auch: stylistic sets (ss##).

.class {
  -moz-font-feature-settings: "salt";
  -webkit-font-feature-settings: "salt";
  font-feature-settings: "salt";
}

Das Merkmal „Stilistische Alternativen“ ist in der Standardeinstellung deaktiviert.

Um dieses Merkmal mit font-feature-settings zu aktivieren, verwenden Sie das Merkmal-Tag „salt“. Beachten Sie, dass es für ein bestimmtes Zeichen mehrere stilistische Alternativen geben kann. Um auf eine stilistische Alternative zuzugreifen, fügen Sie einen numerischen Index zum Wert hinzu:

.class {
  -moz-font-feature-settings: "salt" 2;
  -webkit-font-feature-settings: "salt" 2;
  font-feature-settings: "salt" 2;
}

Dies würde die zweite verfügbare stilistische Alternative aktivieren, sofern sie in der Schriftart vorhanden ist. Wie Sie wahrscheinlich vermuten, entspricht ein Wert von „salt“, wie im ersten Codebeispiel verwendet, der Verwendung eines Werts von „salt“ 1.

Fürs Erste überspringen wir die Eigenschaft font-variant, da ihre „benannten Werte“ (für die es keine guten Beispiele gibt) von font-feature-value-CSS-Definitionen numerischen stilistischen Alternativen-Indizes zugeordnet werden, die noch nicht von allen wichtigen Browsern unterstützt werden.

Normale Zahlen (lnum)

Beispiel für normale Zahlen in Aktion, gesetzt in Warnock Pro

Beispiel für die Anwendung des lnum-CSS

Dieses Merkmal ändert Zahlen-Glyphen aus Standard- oder Mediävalzahlen in normale Zahlen. Beachten Sie, dass einige Schriftarten eventuell normale Zahlen als standardmäßigen Zahlenstil verwenden. In diesem Fall wirkt sich das Aktivieren dieser Funktion nicht auf das Erscheinungsbild der Glyphen aus.

.class {
  font-variant-numeric: lining-nums;
  -moz-font-feature-settings: "lnum";
  -webkit-font-feature-settings: "lnum";
  font-feature-settings: "lnum";
}

Das Merkmal „Normale Zahlen“ ist in der Standardeinstellung deaktiviert.

Um dieses Merkmal mit der Eigenschaft font-variant oder der Untereigenschaft font-variant-numeric zu aktivieren, verwenden Sie den Wert lining-nums. Um denselben Effekt mit font-feature-settings zu erzielen, verwenden Sie das Merkmal-Tag „lnum“.

Mediävalzahlen (onum)

Beispiel für Mediävalzahlen in Aktion, gesetzt in Warnock Pro

Beispiel für die Anwendung des onum-CSS

Dieses Merkmal ändert Zahlenglyphen von Standard- oder normalen Zahlen in Mediävalzahlen. Beachten Sie, dass einige Schriftarten eventuell Mediävalzahlen als standardmäßigen Zahlenstil verwenden. In diesem Fall wirkt sich das Aktivieren dieses Merkmals nicht auf das Erscheinungsbild der Glyphen aus.

.class {
  font-variant-numeric: oldstyle-nums;
  -moz-font-feature-settings: "onum";
  -webkit-font-feature-settings: "onum";
  font-feature-settings: "onum";
}

Das Merkmal „Mediävalzahlen“ ist in der Standardeinstellung deaktiviert.

Um dieses Merkmal mit der Eigenschaft font-variant oder der Untereigenschaft font-variant-numeric zu aktivieren, verwenden Sie den Wert oldstyle-nums. Um denselben Effekt mit „font-feature-settings“ zu erzielen, verwenden Sie das Merkmal-Tag „onum“.

Proportionale Zahlen (pnum)

Beispiel für proportionale Zahlen in Aktion, gesetzt in Hypatia Sans Pro

Beispiel für die Anwendung des pnum-CSS

Dieses Merkmal ersetzt Zahlenglyphen-Sets mit einer einheitlichen (tabellarischen) Breite durch entsprechende Glyphen-Sets mit Glyphen-spezifischer (proportionaler) Breite. Beachten Sie, dass einige Schriftarten eventuell proportionale Zahlen als standardmäßigen Zahlenstil verwenden. In diesem Fall wirkt sich das Aktivieren dieses Merkmals nicht auf das Erscheinungsbild der Glyphen aus.

.class {
  font-variant-numeric: proportional-nums;
  -moz-font-feature-settings: "pnum";
  -webkit-font-feature-settings: "pnum";
  font-feature-settings: "pnum";
}

Das Merkmal „Proportionale Zahlen“ ist in der Standardeinstellung deaktiviert.

Um dieses Merkmal mit der Eigenschaft font-variant oder der Untereigenschaft font-variant-numeric zu aktivieren, verwenden Sie den Wert proportional-nums. Um denselben Effekt mit font-feature-settings zu erzielen, verwenden Sie das Merkmal-Tag „pnum“.

Tabellenzahlen (tnum)

Beispiel für Tabellenzahlen in Aktion, gesetzt in Hypatia Sans Pro

Beispiel für die Anwendung des tnum-CSS

Dieses Merkmal ersetzt Zahlenglyphen-Sets mit einer Glyphen-spezifischen (proportionalen) Breite durch entsprechende Glyphen-Sets mit einheitlicher (tabellarischer) Breite. Beachten Sie, dass einige Schriftarten eventuell Tabellenzahlen als standardmäßigen Zahlenstil verwenden. In diesem Fall wirkt sich das Aktivieren dieses Merkmals nicht auf das Erscheinungsbild der Glyphen aus.

.class {
  font-variant-numeric: tabular-nums;
  -moz-font-feature-settings: "tnum";
  -webkit-font-feature-settings: "tnum";
  font-feature-settings: "tnum";
}

Das Merkmal „Tabellenzahlen“ ist in der Standardeinstellung deaktiviert.

Um dieses Merkmal mit der Eigenschaft font-variant oder der Untereigenschaft font-variant-numeric zu aktivieren, verwenden Sie den Wert tabular-nums. Um denselben Effekt mit font-feature-settings zu erzielen, verwenden Sie das Merkmal-Tag „tnum“.

Brüche (frac)

Beispiel für Brüche in Aktion, gesetzt in Warnock Pro

Beispiel für die Anwendung des frac-CSS

Dieses Merkmal ersetzt durch einen Schrägstrich voneinander getrennte Zahlen durch einen gemeinsamen (diagonalen) Bruch.

.class {
  font-variant-numeric: diagonal-fractions;
  -moz-font-feature-settings: "frac";
  -webkit-font-feature-settings: "frac";
  font-feature-settings: "frac";
}

Das Merkmal „Brüche“ ist in der Standardeinstellung deaktiviert.

Um dieses Merkmal mit der Eigenschaft font-variant oder der Untereigenschaft font-variant-numeric zu aktivieren, verwenden Sie den Wert diagonal-fractions. Um denselben Effekt mit font-feature-settings zu erzielen, verwenden Sie das Merkmal-Tag „frac“.

Ordnungszahlen (ordn)

Beispiel für Ordnungszahlen in Aktion, gesetzt in Warnock Pro

Beispiel für die Anwendung des ordn-CSS

Dieses Merkmal ersetzt standardmäßige alphabetische Glyphen durch die entsprechenden Ordnungsformen, für den Einsatz nach Zahlen.

.class {
  font-variant-numeric: ordinal;
  -moz-font-feature-settings: "ordn";
  -webkit-font-feature-settings: "ordn";
  font-feature-settings: "ordn";
}

Das Merkmal „Ordnungszahlen“ ist in der Standardeinstellung deaktiviert.

Um dieses Merkmal mit der Eigenschaft font-variant oder der Untereigenschaft font-variant-numeric zu aktivieren, verwenden Sie den Wert ordinal. Um denselben Effekt mit font-feature-settings zu erzielen, verwenden Sie das Merkmal-Tag „ordn“.

Beachten Sie, dass nicht alle Glyphen nach Zahlen ausgetauscht werden. Gemäß der OpenType-Spezifikation ist eine Ausnahme zur „folgt einer Zahl“-Regel das Numero-Zeichen (U 2116), das eigentlich ein Ligatur-Ersatz ist, aber am besten über dieses Merkmal zugänglich ist.

Stilistische Sets (ss##)

Beispiel für stilistische Sets in Aktion, gesetzt in Hypatia Sans Pro

Beispiel für die Anwendung des CSS für stilistische Sets

Dieses Merkmal ersetzt Sets mit Standard-Glyphen im Zeichensatz durch stilistische Varianten. Glyphen in stilistischen Sets können so gestaltet werden, dass sie visuell harmonisieren, auf besondere Weise interagieren oder anderweitig zusammenarbeiten. Siehe auch: Stilistische Alternativen (salt), die entwickelt wurden, um stilistische Alternativen für einzelne Glyphen anzubieten.

.class {
  -moz-font-feature-settings: "ss01";
  -webkit-font-feature-settings: "ss01";
  font-feature-settings: "ss01";
}

Das Merkmal „Stilistische Alternativen“ ist in der Standardeinstellung deaktiviert.

Um dieses Merkmal mit der Eigenschaft font-feature-settings zu aktivieren, verwenden Sie das Merkmal-Tag „ss##“. „##“ ist eine beliebige Kombination aus 2 Ziffern im Bereich 01–20. Beachten Sie, dass Schriftarten die stilistischen Sets auf vollkommen zufällige und benutzerdefinierte Art und Weise nutzen. Beispielsweise können zwei verschiedene Schriftarten dieselbe Funktion (wie SS01) verwenden, um vollständig andere Glyphen-Sätze zu ersetzen; oder eine bestimmte Schrift kann SS01 und SS03 verwenden, um Glyphen-Sätze zu ersetzen, aber SS02 ignorieren. Einige Schriftenhersteller halten eine Dokumentation bereit, wie die Merkmale organisiert sind.

Fürs Erste überspringen wir die Eigenschaft font-variant, da ihre „benannten“ Werte (wie z. B. styleset(sparp-serifs)) von „font-feature-value“-CSS-Definitionen numerischen stilistischen Sets-Indizes zugeordnet werden, die noch nicht von allen wichtigen Browsern unterstützt werden.

Proportionale Breiten (pwid)

Beispiel für proportionale Breite in Aktion, gesetzt in Kozuka Mincho Pr6n:

Beispiel für die Anwendung des pwid-CSS

Dieses Merkmal ersetzt Glyphen-Sätze mit einheitlicher Breite (in der Regel Geviert oder Halbgeviert) durch Glyphen-Sätze mit proportionalen Breiten. Die proportionalen Varianten werden häufig für die lateinischen Zeichen in CJKV-Schriftarten verwendet, können aber auch für Kana in japanischen Schriftarten verwendet werden. (Quelle)

.class {
  font-variant-east-asian: proportional-width;
  -moz-font-feature-settings: "pwid";
  -webkit-font-feature-settings: "pwid";
  font-feature-settings: "pwid";
}

Das Merkmal „Proportionale Breite“ ist in der Standardeinstellung deaktiviert und wird in keiner Version von Safari unter Mac OS oder iOS unterstützt. Um dieses Merkmal mit der Eigenschaft font-variant oder der Untereigenschaft font-variant-east-asian zu aktivieren, verwenden Sie den Wert proportional-width. Um denselben Effekt mit „font-feature-setting“ zu erzielen, verwenden Sie das Merkmal-Tag „pwid“.

Proportionale alternative Breiten (palt)

Beispiel für proportionale alternative Breiten in Aktion, gesetzt in Source Han Sans:

Beispiel für die Anwendung des palt-CSS

Dieses Merkmal passt die Abstände zwischen Glyphen, die in Geviert-Breite gesetzt sind, so an, dass sie in einzelne (mehr oder weniger proportionale) horizontale Breiten passen. Dies unterscheidet sich insofern von pwid, als neue Glyphen (GPOS, keine GSUB-Funktion) nicht ersetzt werden. Entweder bevorzugt der Benutzer die feste Laufweite oder er möchte einfach sicherstellen, dass die Glyphe gut passt und nicht in vertikaler Einstellung gedreht wird (lateinische Formen für proportionale Abstände würden gedreht). (Quelle)

.class {
  -moz-font-feature-settings: "palt";
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

Das Merkmal „Proportionale alternative Breiten“ ist in der Standardeinstellung deaktiviert und wird in keiner Version von Safari unter Mac OS oder iOS unterstützt. Die einzige Möglichkeit, dieses Merkmal zu aktivieren, sind die „font-feature-settings“ unter Verwendung des Merkmal-Tags „palt“.

Proportionales Kana (pkna)

Beispiel für proportionales Kana in Aktion, gesetzt in Kozuka Mincho Pr6n:

Beispiel für die Anwendung des pkna-CSS

Dieses Merkmal ersetzt Kana- und Kana-verwandte Glyphen, die in einheitlichen Breiten (Halb- oder Vollbreite) gesetzt wurden, durch Glyphen in proportionaler Breite. Es ähnelt dem Merkmal für proportionale Breiten, gilt aber nur für kana. (Quelle)

.class {
  -moz-font-feature-settings: "pkna";
  -webkit-font-feature-settings: "pkna";
  font-feature-settings: "pkna";
}

Das Merkmal „Proportionales Kana“ ist in der Standardeinstellung deaktiviert und wird in keiner Version von Safari unter Mac OS oder iOS unterstützt. Die einzige Möglichkeit, dieses Merkmal zu aktivieren, sind die „font-feature-settings“ unter Verwendung des Merkmal-Tags „pkna“.

Vollbreiten (fwid)

Beispiel für Vollbreiten in Aktion, gesetzt in Kozuka Mincho Pr6n:

Beispiel für die Anwendung des fwid-CSS

Dieses Merkmal ersetzt Glyphen-Sätze mit anderen Breiten durch Glyphen, die in Vollbreite (in der Regel Geviert) gesetzt sind. Bei einer CJKV-Schrift kann dies lateinische Zeichen im „unteren ASCII-Bereich“ und verschiedene Symbole beinhalten. Bei einer europäischen Schrift ersetzt dieses Merkmal Glyphen mit proportionalem Abstand durch Glyphen mit fester Laufweite, die in der Regel in Breiten von 0,6 Geviert gesetzt sind. (Quelle)

.class {
  font-variant-east-asian: full-width;
  -moz-font-feature-settings: "fwid";
  -webkit-font-feature-settings: "fwid";
  font-feature-settings: "fwid";
}

Das Merkmal „Vollbreiten“ ist in der Standardeinstellung deaktiviert und wird in keiner Version von Safari unter Mac OS oder iOS unterstützt. Um dieses Merkmal mit der Eigenschaft „font-variant“ oder der Untereigenschaft „font-variant-east-asian“ zu aktivieren, verwenden Sie den Wert „full-width“. Um denselben Effekt mit „font-feature-setting“ zu erzielen, verwenden Sie das Merkmal-Tag „fwid“.

Halbbreiten (hwid)

Beispiel für Halbbreiten in Aktion, gesetzt in Kozuka Mincho Pr6n:

Beispiel für die Anwendung des hwid-CSS

Dieses Merkmal ersetzt Glyphen mit proportionalen Breiten oder anderen festen Breiten als Halbgeviert durch Glyphen mit Halbgeviert-Breiten. Viele CJKV-Schriftarten enthalten Glyphen, die in mehreren Breiten gesetzt sind; dieses Merkmal wählt die Halbgeviert-Version. Es gibt verschiedene Kontexte, bei denen dies das bevorzugte Verhalten ist, dazu gehört auch die Kompatibilität mit älteren Desktop-Dokumenten. (Quelle)

.class {
  -moz-font-feature-settings: "hwid";
  -webkit-font-feature-settings: "hwid";
  font-feature-settings: "hwid";
}

Das Merkmal „Halbbreiten“ ist in der Standardeinstellung deaktiviert und wird in keiner Version von Safari unter Mac OS oder iOS unterstützt. Die einzige Möglichkeit, dieses Merkmal zu aktivieren, sind die „font-feature-settings“ unter Verwendung des Merkmal-Tags „hwid“.

Alternative Halbbreiten (halt)

Beispiel für alternative Halbbreiten in Aktion, gesetzt in Kozuka Mincho Pr6n:

Beispiel für die Anwendung des halt-CSS

Dieses Merkmal passt die Abstände zwischen Glyphen, die in Geviert-Breite gesetzt sind, so an, dass sie in Halbgeviert-Breiten passen. Dies unterscheidet sich insofern von hwid, als neue Glyphen nicht ersetzt werden. (Quelle)

.class {
  -moz-font-feature-settings: "halt";
  -webkit-font-feature-settings: "halt";
  font-feature-settings: "halt";
}

Das Merkmal „Alternative Halbbreiten“ ist in der Standardeinstellung deaktiviert und wird in keiner Version von Safari unter Mac OS oder iOS unterstützt. Die einzige Möglichkeit, dieses Merkmal zu aktivieren, sind die „font-feature-settings“ unter Verwendung des Merkmal-Tags „halt“.

Drittelbreiten (twid)

Beispiel für Drittelbreiten in Aktion, gesetzt in Kozuka Mincho Pr6n:

Beispiel für die Anwendung des twid-CSS

Dieses Merkmal ersetzt Glyphen mit anderen Breiten durch Glyphen, die in der Breite eines Drittels eines Gevierts gesetzt sind. Die beteiligten Charaktere sind in der Regel Zahlen und einige Formen von Satzzeichen. (Quelle)

.class {
  -moz-font-feature-settings: "twid";
  -webkit-font-feature-settings: "twid";
  font-feature-settings: "twid";
}

Das Merkmal „Drittelbreiten“ ist in der Standardeinstellung deaktiviert und wird in keiner Version von Safari unter Mac OS oder iOS unterstützt. Die einzige Möglichkeit, dieses Merkmal zu aktivieren, sind die „font-feature-settings“ unter Verwendung des Merkmal-Tags „twid“.

Viertelbreiten (qwid)

Beispiel für Viertelbreiten in Aktion, gesetzt in Kozuka Mincho Pr6n:

Beispiel für die Anwendung des qwid-CSS

Dieses Merkmal ersetzt Glyphen mit anderen Breiten durch Glyphen, die in der Breite eines Viertels eines Gevierts gesetzt sind (die Hälfte eines Halbgevierts). Die beteiligten Charaktere sind in der Regel Zahlen und einige Formen von Satzzeichen. (Quelle)

.class {
  -moz-font-feature-settings: "qwid";
  -webkit-font-feature-settings: "qwid";
  font-feature-settings: "qwid";
}

Das Merkmal „Viertelbreiten“ ist in der Standardeinstellung deaktiviert und wird in keiner Version von Safari unter Mac OS oder iOS unterstützt. Die einzige Möglichkeit, dieses Merkmal zu aktivieren, sind die „font-feature-settings“ unter Verwendung des Merkmal-Tags „qwid“.

JIS78-Formen (jp78)

Beispiel für JIS78-Formen in Aktion, gesetzt in Kozuka Mincho Pr6n:

Beispiel für die Anwendung des jp78-CSS

Dieses Merkmal ersetzt die standardmäßigen (JIS90) japanischen Glyphen durch die entsprechenden Formen aus der Spezifikation JIS C 6226-1978 (JIS78). (Quelle)

.class {
  font-variant-east-asian: jis78;
  -moz-font-feature-settings: "jp78";
  -webkit-font-feature-settings: "jp78";
  font-feature-settings: "jp78";
}

Das Merkmal „JIS78-Formen“ ist in der Standardeinstellung deaktiviert und wird in keiner Version von Safari unter Mac OS oder iOS unterstützt. Um dieses Merkmal mit der Eigenschaft „font-variant“ oder der Untereigenschaft „font-variant-east-asian“ zu aktivieren, verwenden Sie den Wert „jis78“. Um denselben Effekt mit „font-feature-setting“ zu erzielen, verwenden Sie das Merkmal-Tag „jp78“.

JIS83-Formen (jp83)

Beispiel für JIS83-Formen in Aktion, gesetzt in Kozuka Mincho Pr6n:

Beispiel für die Anwendung des jp83-CSS

Dieses Merkmal ersetzt die standardmäßigen (JIS90) japanischen Glyphen durch die entsprechenden Formen aus der Spezifikation JIS X 0208-1983 (JIS83). (Quelle)

.class {
  font-variant-east-asian: jis83;
  -moz-font-feature-settings: "jp83";
  -webkit-font-feature-settings: "jp83";
  font-feature-settings: "jp83";
}

Das Merkmal „JIS83-Formen“ ist in der Standardeinstellung deaktiviert und wird in keiner Version von Safari unter Mac OS oder iOS unterstützt. Um dieses Merkmal mit der Eigenschaft „font-variant“ oder der Untereigenschaft „font-variant-east-asian“ zu aktivieren, verwenden Sie den Wert „jis83“. Um denselben Effekt mit „font-feature-setting“ zu erzielen, verwenden Sie das Merkmal-Tag „jp83“.

JIS90-Formen (jp90)

Beispiel für JIS90-Formen in Aktion, gesetzt in Kozuka Mincho Pr6n:

Beispiel für die Anwendung des jp90-CSS

Dieses Merkmal ersetzt die standardmäßigen japanischen Glyphen aus den Spezifikationen JIS78 oder JIS83 durch die entsprechenden Formen aus der Spezifikation JIS X 0208-1990 (JIS90). (Quelle)

.class {
  font-variant-east-asian: jis90;
  -moz-font-feature-settings: "jp90";
  -webkit-font-feature-settings: "jp90";
  font-feature-settings: "jp90";
}

Das Merkmal „JIS90-Formen“ ist in der Standardeinstellung deaktiviert und wird in keiner Version von Safari unter Mac OS oder iOS unterstützt. Um dieses Merkmal mit der Eigenschaft „font-variant“ oder der Untereigenschaft „font-variant-east-asian“ zu aktivieren, verwenden Sie den Wert „jis90“. Um denselben Effekt mit „font-feature-setting“ zu erzielen, verwenden Sie das Merkmal-Tag „jp90“.

JIS2004-Formen (jp04)

Beispiel für JIS2004-Formen in Aktion, gesetzt in Kozuka Mincho Pro:

Beispiel für die Anwendung des jp04-CSS

Der National Language Council (NLC) von Japan hat neue Glyphenformen für eine Reihe von JIS-Zeichen definiert, die als neue prototypische Formen in die Spezifikation JIS X 0213:2004 aufgenommen wurden. Die Funktion „jp04“ ist eine Teilmenge der Funktion „nlck“ und dient für den Zugriff auf diese prototypischen Glyphen auf eine Weise, die die Integrität der Spezifikation JIS X 0213:2004 aufrechterhält. (Quelle)

.class {
  font-variant-east-asian: jis04;
  -moz-font-feature-settings: "jp04";
  -webkit-font-feature-settings: "jp04";
  font-feature-settings: "jp04";
}

Das Merkmal „JIS2004-Formen“ ist in der Standardeinstellung deaktiviert und wird in keiner Version von Safari unter Mac OS oder iOS unterstützt. Um dieses Merkmal mit der Eigenschaft „font-variant“ oder der Untereigenschaft „font-variant-east-asian“ zu aktivieren, verwenden Sie den Wert „jis04“. Um denselben Effekt mit „font-feature-setting“ zu erzielen, verwenden Sie das Merkmal-Tag „jp04“.

Traditionelle Formen (trad)

Beispiel für traditionelle Formen in Aktion, gesetzt in Kozuka Mincho Pr6n:

Beispiel für die Anwendung des trad-CSS

Ersetzt „vereinfachte“ chinesische Hanzi- oder japanische Kanji-Formen durch die entsprechenden „traditionellen“ Formen. (Quelle)

.class {
  font-variant-east-asian: traditional;
  -moz-font-feature-settings: "trad";
  -webkit-font-feature-settings: "trad";
  font-feature-settings: "trad";
}

Das Merkmal „Traditionelle Formen“ ist in der Standardeinstellung deaktiviert und wird in keiner Version von Safari unter Mac OS oder iOS unterstützt. Um dieses Merkmal mit der Eigenschaft „font-variant“ oder der Untereigenschaft „font-variant-east-asian“ zu aktivieren, verwenden Sie den Wert „traditional“. Um denselben Effekt mit „font-feature-setting“ zu erzielen, verwenden Sie das Merkmal-Tag „trad“.

Formen in der Ruby-Notation (ruby)

Beispiel für Formen in der Ruby-Notation in Aktion, gesetzt in Kozuka Mincho Pr6n:

Beispiel für die Anwendung des ruby-CSS

Japanische Schriftsätze verwenden häufig kleinere Kana-Glyphen, in der Regel in hochgestellter Form, um die Bedeutung des Kanji zu klären, mit dem der Leser eventuell nicht vertraut ist. Sie werden als „ruby“ bezeichnet. Dieser Name leitet sich von dem alten Zeichensatz-Begriff für ein Zeichen in Vier-Punkt-Größe ab. Dieses Merkmal identifiziert Glyphen in der Schriftart, die für diesen Zweck entwickelt wurden, und ersetzt sie für die Standard-Designs. (Quelle)

.class {
  font-variant-east-asian: ruby;
  -moz-font-feature-settings: "ruby";
  -webkit-font-feature-settings: "ruby";
  font-feature-settings: "ruby";
}

Das Merkmal „Formen in der Ruby-Notation“ ist in der Standardeinstellung deaktiviert. Um dieses Merkmal mit der Eigenschaft „font-variant“ oder der Untereigenschaft „font-variant-east-asian“ zu aktivieren, verwenden Sie den Wert „ruby“. Um denselben Effekt mit „font-feature-setting“ zu erzielen, verwenden Sie das Merkmal-Tag „ruby“.

Beachten Sie das von uns gestylte rt-Element im obigen Beispielcode. Die korrekte Markierung für Ruby-Text wird im Abschnitt zur Textebenen-Semantik in der W3C HTML5-Spezifikation erklärt. Beachten Sie auch, dass die Position und Größe eines Ruby-Textes in allen Browsern/Versionen variiert. Sie können versuchen, die Browser-Standardwerte durch das Zurücksetzen des Stylesheets und eine manuelle Dimensionierung/Positionierung des Ruby-Textes zu deaktivieren.

Horizontale Kana-Alternativen (hkna)

Beispiel für horizontale Kana-Alternativen in Aktion, gesetzt in Kozuka Mincho Pr6n:

Beispiel für die Anwendung des hkna-CSS

Dieses Merkmal ersetzt standardmäßiges Kana durch Formen, die speziell nur für das horizontale Schreiben entwickelt wurden. Dies ist eine typografische Optimierung für eine verbesserte Passform und noch mehr Farbe. (Quelle)

.class {
  -moz-font-feature-settings: "hkna";
  -webkit-font-feature-settings: "hkna";
  font-feature-settings: "hkna";
}

Das Merkmal „Horizontale Kana-Alternativen“ ist in der Standardeinstellung deaktiviert und wird in keiner Version von Safari unter Mac OS oder iOS unterstützt. Die einzige Möglichkeit, dieses Merkmal zu aktivieren, sind die „font-feature-settings“ unter Verwendung des Merkmal-Tags „hkna“.

NLC-Kanji-Formen (nlck)

Beispiel für NLC-Kanji-Formen in Aktion, gesetzt in Kozuka Mincho Pr6n:

Beispiel für die Anwendung des nlck-CSS

Der National Language Council (NLC) von Japan hat neue Glyphenformen für eine Reihe von JIS-Zeichen in 2000 definiert. Die Funktion „nlck“ wird für den Zugriff auf diese Glyphen verwendet. (Quelle)

.class {
  -moz-font-feature-settings: "nlck";
  -webkit-font-feature-settings: "nlck";
  font-feature-settings: "nlck";
}

Das Merkmal „NLC-Kanji-Formen“ ist in der Standardeinstellung deaktiviert und wird in keiner Version von Safari unter Mac OS oder iOS unterstützt. Die einzige Möglichkeit, dieses Merkmal zu aktivieren, sind die „font-feature-settings“ unter Verwendung des Merkmal-Tags „nlck“.

Alternative Formen für Anmerkungen (nalt)

Beispiel für alternative Formen für Anmerkungen in Aktion, gesetzt in Kozuka Mincho Pr6n:

Beispiel für die Anwendung des nalt-CSS

Dieses Merkmal ersetzt die Standard-Glyphen durch verschiedene Darstellungsformen (z. B. Glyphen in offenen oder ausgefüllten Kreisen, Quadraten, Klammern, Rauten oder abgerundeten Kästen). In einigen Fällen kann bereits eine Anmerkungsform vorhanden sein, der Benutzer möchte aber eventuell eine andere verwenden. (Quelle)

.class {
  -moz-font-feature-settings: "nalt";
  -webkit-font-feature-settings: "nalt";
  font-feature-settings: "nalt";
}

Das Merkmal „Alternative Formen für Anmerkungen“ ist in der Standardeinstellung deaktiviert und wird in keiner Version von Safari unter Mac OS oder iOS unterstützt. Die einzige Möglichkeit, dieses Merkmal zu aktivieren, sind die „font-feature-settings“ unter Verwendung des Merkmal-Tags „nalt“.

Kursiv (ital)

Beispiel für Kursiv in Aktion, gesetzt in Kozuka Mincho Pr6n:

Beispiel für die Anwendung des ital-CSS

Einige Schriftarten (z. B. japanische Schriftarten aus Adobe Pro) verfügen über sowohl Roman- als auch Italic-Formen einiger Zeichen in einer einzelnen Schriftart. Dieses Merkmal ersetzt die Roman-Glyphen durch entsprechende Italic-Glyphen. (Quelle)

.class {
  -moz-font-feature-settings: "ital";
  -webkit-font-feature-settings: "ital";
  font-feature-settings: "ital";
}

Das Merkmal „Kursiv“ ist in der Standardeinstellung deaktiviert und wird in keiner Version von Safari unter Mac OS oder iOS unterstützt. Die einzige Möglichkeit, dieses Merkmal zu aktivieren, sind die „font-feature-settings“ unter Verwendung des Merkmal-Tags „ital“.

Hinweis: Allgemeines zu Vertikal-Eigenschaften

Die folgenden OpenType-Merkmale helfen dabei, vertikal ausgerichteten Text durch Anpassen des Abstands und durch Austauschen von Glyphen besser aussehen zu lassen. Jedoch ist die Browser-Unterstützung für die vertikale Ausrichtung begrenzt. Obwohl diese OT-Merkmale eventuell unterstützt werden und ordnungsgemäß funktionieren, kommen sie nicht zum Tragen, wenn nicht auch die vertikale Ausrichtung unterstützt wird und ordnungsgemäß funktioniert.

.class {
  direction: rtl;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  -moz-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  -webkit-text-orientation: upright;
  -moz-text-orientation: upright;
  -ms-text-orientation: upright;
  text-orientation: upright;
}

Unser Code basiert auf dem CSS Writing Modes Level 3 Editor's Draft des W3C und dieses Beispiel auf der genialen Forschung von David Storey. Sie können sehen, wie diese Funktion Gestalt annimmt – sie wird aber derzeit nicht von Browsern unterstützt. Wir haben den obigen Code getestet und der Schreib-Modus funktionierte nur in Chrome.

Vertikales Kerning (vkrn)

Dieses Merkmal passt den Abstand zwischen Glyphen an. Es dient in erster Linie dazu, einen optisch einheitlichen Abstand zwischen Glyphen bereitzustellen. Obwohl eine gut konzipierte Schrift einen insgesamt konsequenten Abstand zwischen Glyphen aufweist, erfordern einige Glyphen-Kombinationen eine Anpassung zur Verbesserung der Lesbarkeit. Neben Standardeinstellungen in vertikaler Richtung kann diese Funktion größenabhängige Kerning-Daten über Gerätetabellen, „Cross-Stream“-Kerning in der X-Textrichtung und eine Anpassung der Glyphen-Platzierung unabhängig von der Vorschubeinstellung bereitstellen. Beachten Sie, dass dieses Merkmal für Änderungen an mehr als zwei Glyphen angewendet und nicht für Schriftarten mit fester Breite verwendet werden kann. Beachten Sie außerdem, dass dieses Merkmal nur für vertikal gesetzten Text angewendet werden kann. (Quelle)

.class {
  -moz-font-feature-settings: "vkrn", "vpal";
  -webkit-font-feature-settings: "vkrn", "vpal";
  font-feature-settings: "vkrn", "vpal";
}

Das Merkmal „Vertikales Kerning“ ist in der Standardeinstellung deaktiviert und wird weder in IE noch in irgendeiner Version von Safari unter Mac OS oder iOS unterstützt. Und obwohl dieses Merkmal in Firefox unterstützt werden kann, wird vertikaler Text nicht unterstützt. Die Einstellung wird also effektiv nicht unterstützt. Die einzige Möglichkeit, dieses Merkmal zu aktivieren, sind die „font-feature-settings“ unter Verwendung des Merkmal-Tags „vkrn“. Wenn „vkrn“ aktiviert ist, muss auch „vpal“ aktiviert werden, wenn es existiert. Weitere Informationen finden Sie unter Syntax zur Verwendung mehrerer OpenType-Merkmale und Hinweis: Allgemeines zu Vertikal-Eigenschaften.

Vertikale Alternativen (vert)

Dieses Merkmal ersetzt die Standard-Formen durch Varianten, die für vertikales Schreiben im vertikalen Schreib-Modus angepasst wurden. Obwohl die meisten CJKV-Glyphen vertikal bleiben, sofern sie im vertikalen Schreib-Modus gesetzt wurden, nehmen einige für diesen Zweck eine andere Form an (in der Regel gedreht und neu positioniert). Die durch dieses Merkmal abgedeckten Glyphen entsprechen dem Satz normal gedrehter Glyphen in Low-End-DTP-Applikationen. (Quelle)

Das Merkmal „Vertikale Alternativen“ ist in der Standardeinstellung aktiviert. Dies bedeutet, es sollte korrekt dargestellt werden, ohne dass Sie ein CSS schreiben müssen. Die Einstellung ist jedoch standardmäßig nicht in jeder Version von IE oder Firefox aktiviert. Darüber hinaus kann sie nicht in Safari (Mac oder iOS) aktiviert werden. Weitere Informationen finden Sie unter Hinweis: Allgemeines zu Vertikal-Eigenschaften.

.class {
  -moz-font-feature-settings: "vert";
  -webkit-font-feature-settings: "vert";
  font-feature-settings: "vert";
}

Die einzige Möglichkeit, das Merkmal „Vertikale Alternativen“ zu aktivieren, sind die „font-feature-settings“ unter Verwendung des Merkmal-Tags „vert“.

Proportionale alternative vertikale Metriken (vpal)

Dieses Merkmal passt die Abstände zwischen Glyphen, die in Geviert-Höhe gesetzt sind, so an, dass sie in einzelne (mehr oder weniger proportionale) vertikale Höhen passen. Dies unterscheidet sich insofern von „valt“, als neue Glyphen (GPOS, keine GSUB-Funktion) nicht ersetzt werden. Entweder bevorzugt der Benutzer die feste Laufweite oder er möchte einfach sicherstellen, dass die Glyphe gut passt. (Quelle)

.class {
  -moz-font-feature-settings: "vpal";
  -webkit-font-feature-settings: "vpal";
  font-feature-settings: "vpal";
}

Das Merkmal „Proportionale alternative vertikale Metriken“ ist in der Standardeinstellung deaktiviert und wird weder in IE noch in irgendeiner Version von Safari unter Mac OS oder iOS unterstützt. Und obwohl dieses Merkmal in Firefox unterstützt werden kann, wird vertikaler Text nicht unterstützt. Die Einstellung wird also effektiv nicht unterstützt. Die einzige Möglichkeit, dieses Merkmal zu aktivieren, sind die „font-feature-settings“ unter Verwendung des Merkmal-Tags „vpal“. Weitere Informationen finden Sie unter Hinweis: Allgemeines zu Vertikal-Eigenschaften.

Alternative vertikale Halbmetriken (vhal)

Dieses Merkmal passt die Abstände zwischen Glyphen, die in Geviert-Höhen gesetzt sind, so an, dass sie in Halbgeviert-Höhen passen. (Quelle)

.class {
  -moz-font-feature-settings: "vhal";
  -webkit-font-feature-settings: "vhal";
  font-feature-settings: "vhal";
}

Das Merkmal „Alternative vertikale Halbmetriken“ ist in der Standardeinstellung deaktiviert und wird weder in IE noch in irgendeiner Version von Safari unter Mac OS oder iOS unterstützt. Die einzige Möglichkeit, dieses Merkmal zu aktivieren, sind die „font-feature-settings“ unter Verwendung des Merkmal-Tags „vhal“. Weitere Informationen finden Sie unter Hinweis: Allgemeines zu Vertikal-Eigenschaften.

Vertikale Kana-Alternativen (vkna)

Dieses Merkmal ersetzt standardmäßiges Kana durch Formen, die speziell nur für das vertikale Schreiben entwickelt wurden. Dies ist eine typografische Optimierung für eine verbesserte Passform und noch mehr Farbe. Lesen Sie auch „hkna“. (Quelle)

.class {
  -moz-font-feature-settings: "vkna";
  -webkit-font-feature-settings: "vkna";
  font-feature-settings: "vkna";
}

Das Merkmal „Vertikale Kana-Alternativen“ ist in der Standardeinstellung deaktiviert und wird in keiner Version von Safari unter Mac OS oder iOS unterstützt. Die einzige Möglichkeit, dieses Merkmal zu aktivieren, sind die „font-feature-settings“ unter Verwendung des Merkmal-Tags „vkna“. Weitere Informationen finden Sie unter Hinweis: Allgemeines zu Vertikal-Eigenschaften.

Kerning (kern)

Beispiel für Kerning in Aktion, gesetzt in Source Sans Pro:

Beispiel für die Anwendung des kern-CSS

Dieses Merkmal passt den Abstand zwischen Glyphen an. Es dient in erster Linie dazu, einen optisch einheitlichen Abstand zwischen Glyphen bereitzustellen. Obwohl eine gut konzipierte Schrift einen insgesamt konsequenten Abstand zwischen Glyphen aufweist, erfordern einige Glyphen-Kombinationen eine Anpassung zur Verbesserung der Lesbarkeit. Beachten Sie, dass dieses Merkmal für Änderungen an mehr als zwei Glyphen angewendet und nicht für Schriftarten mit fester Breite verwendet werden kann. Beachten Sie außerdem, dass dieses Merkmal nicht für vertikal gesetzten Text angewendet werden kann. (Quelle)

.class {
  font-kerning: normal;
  -moz-font-feature-settings: "kern";
  -webkit-font-feature-settings: "kern";
  font-feature-settings: "kern";
}

Das Kerning-Merkmal ist in der Standardeinstellung deaktiviert, muss aber in vielen Fällen aktiviert werden.

Um dieses Merkmal mit der Eigenschaft „font-kerning“ zu aktivieren, verwenden Sie den Wert „normal“. Um denselben Effekt mit „font-feature-setting“ zu erzielen, verwenden Sie das Merkmal-Tag „kern“.

Zusammensetzung/Zerlegung von Glyphen (ccmp)

Beispiel für eine Zusammensetzung/Zerlegung von Glyphen in Aktion, gesetzt in Source Han Sans:

Beispiel für die Anwendung des ccmp-CSS

Um die Anzahl der Glyphen-Alternativen zu minimieren, ist es manchmal erwünscht, ein Zeichen in zwei Glyphen zu zerlegen. Darüber hinaus ist es manchmal erwünscht, zwei Zeichen für eine bessere Glyphen-Verarbeitung zu einem zusammenzusetzen. Dieses Merkmal ermöglicht eine solche Zusammensetzung/Zerlegung. Das Merkmal sollte als erstes Merkmal verarbeitet werden und es sollte nur verarbeitet werden, wenn es aufgerufen wird. (Quelle)

Das Merkmal „Zusammensetzung/Zerlegung von Glyphen“ ist in der Standardeinstellung aktiviert. Dies bedeutet, es sollte korrekt dargestellt werden, ohne dass Sie ein CSS schreiben müssen – es gibt jedoch ein paar komplizierte Bedingungen, wenn Sie sicherstellen möchten, dass es aktiviert ist. Dieses Merkmal ist in der Standardeinstellung in Chrome oder Safari nicht aktiviert, es kann aber mit einem beliebigen Wert für „font-feature-settings“ aktiviert werden.

.class {
  -moz-font-feature-settings: "ccmp";
  -webkit-font-feature-settings: "ccmp";
  font-feature-settings: "ccmp";
}

Um sicherzustellen, dass das Merkmal „Zusammensetzung/Zerlegung von Glyphen“ aktiviert ist, verwenden Sie explizit das Merkmal-Tag „ccmp“ – oder jeden anderen Wert für „font-feature-settings“.

Lokalisierte Formen (locl)

Viele Skripte, die zum Schreiben in mehreren Sprachen über weite geografische Regionen verwendet werden, haben lokalisierte Varianten bestimmter Buchstaben entwickelt, die von einzelnen literarischen Gemeinschaften verwendet werden. Beispielsweise haben verschiedene Buchstaben im bulgarischen und serbischen Alphabet Formen, die sich von den russischen Gegenstücken und auch voneinander unterscheiden. In einigen Fällen unterscheidet sich die lokalisierte Form nur geringfügig vom Skript „norm“, in anderen Fällen unterscheiden sich die Formen grundlegend voneinander. Dieses Merkmal ermöglicht lokalisierte Formen von Glyphen, die Standardformen ersetzen. (Quelle)

Das Merkmal „Lokalisierte Formen“ ist in der Standardeinstellung aktiviert. Dies bedeutet, es sollte korrekt dargestellt werden, ohne dass Sie einen CSS schreiben müssen – tatsächlich ist es jedoch nur in Firefox standardmäßig aktiviert und wird in Safari (Mac OS oder iOS) oder unter Android nicht unterstützt.

.class {
  -moz-font-feature-settings: "locl";
  -webkit-font-feature-settings: "locl";
  font-feature-settings: "locl";
}

Um sicherzustellen, dass das Merkmal „Lokalisierte Formen“ aktiviert ist, verwenden Sie explizit das Merkmal-Tag „locl“.

Hochgestellt (sups)

Beispiel für Hochgestellt in Aktion, gesetzt in Hypatia Sans Pro

Beispiel für die Anwendung des sups-CSS

Dieses Merkmal ersetzt normale oder Mediävalzahlen durch hochgestellte Zahlen (in erster Linie für Fußnoten) und Kleinbuchstaben durch hochgestellte Buchstaben (in erster Linie für abgekürzte französische Titel).

.class {
  font-variant-position: super;
  -moz-font-feature-settings: "sups";
  -webkit-font-feature-settings: "sups";
  font-feature-settings: "sups";
}

Das Merkmal „Hochgestellt“ ist in der Standardeinstellung deaktiviert.

Um dieses Merkmal mit der Eigenschaft font-variant oder der Untereigenschaft font-variant-position zu aktivieren, verwenden Sie den Wert super. Um denselben Effekt mit font-feature-settings zu erzielen, verwenden Sie das Merkmal-Tag „sups“.

Tiefgestellt (subs)

Beispiel für Tiefgestellt in Aktion, gesetzt in Warnock Pro

Beispiel für die Anwendung des subs-CSS

Dieses Merkmal kann eine Standard-Glyphe durch eine tiefgestellte Glyphe ersetzen oder es kann eine Glyphen-Ersetzung durch Positionsanpassungen für die richtige Platzierung kombinieren.

.class {
  font-variant-position: sub;
  -moz-font-feature-settings: "subs";
  -webkit-font-feature-settings: "subs";
  font-feature-settings: "subs";
}

Das Merkmal „Tiefgestellt“ ist in der Standardeinstellung deaktiviert.

Um dieses Merkmal mit der Eigenschaft font-variant oder der Untereigenschaft font-variant-position zu aktivieren, verwenden Sie den Wert sub. Um denselben Effekt mit font-feature-settings zu erzielen, verwenden Sie das Merkmal-Tag „subs“.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie