Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
font-variant-east-asian
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.
Diefont-variant-east-asianCSS-Eigenschaft steuert die Verwendung alternativer Glyphen für ostasiatische Schriften wie Japanisch und Chinesisch.
Probieren Sie es aus
font-variant-east-asian: normal;font-variant-east-asian: ruby;font-variant-east-asian: jis78;font-variant-east-asian: proportional-width;<section> <div> <p> JIS78とJIS83以降では、檜と桧、籠と篭など、一部の文字の入れ替えが行われている。また、「唖然」や「躯体」などの書体が変更されている。 </p> </div></section>section { font-family: "YuGothic Medium", "YuGothic", "Yu Gothic Medium", "Yu Gothic", sans-serif; margin-top: 10px; font-size: 1.5em;}Syntax
font-variant-east-asian: normal;font-variant-east-asian: ruby;font-variant-east-asian: jis78; /* <east-asian-variant-values> */font-variant-east-asian: jis83; /* <east-asian-variant-values> */font-variant-east-asian: jis90; /* <east-asian-variant-values> */font-variant-east-asian: jis04; /* <east-asian-variant-values> */font-variant-east-asian: simplified; /* <east-asian-variant-values> */font-variant-east-asian: traditional; /* <east-asian-variant-values> */font-variant-east-asian: full-width; /* <east-asian-width-values> */font-variant-east-asian: proportional-width; /* <east-asian-width-values> */font-variant-east-asian: ruby full-width jis83;/* Global values */font-variant-east-asian: inherit;font-variant-east-asian: initial;font-variant-east-asian: revert;font-variant-east-asian: revert-layer;font-variant-east-asian: unset;Werte
normalDieses Schlüsselwort deaktiviert die Verwendung solcher alternativen Glyphen.
rubyDieses Schlüsselwort erzwingt die Verwendung spezieller Glyphen für Ruby-Zeichen. Da diese normalerweise kleiner sind, gestalten Schriftentwickler oft spezielle Formen, die in der Regel etwas fetter sind, um den Kontrast zu verbessern. Dieses Schlüsselwort entspricht den OpenType-Werten
ruby.<east-asian-variant-values>Diese Werte spezifizieren eine Gruppe von logographischen Glyphenvarianten, die für die Anzeige verwendet werden sollen. Mögliche Werte sind:
Schlüsselwort Standard, der die Glyphen definiert OpenType-Äquivalent jis78JIS X 0208:1978 jp78jis83JIS X 0208:1983 jp83jis90JIS X 0208:1990 jp90jis04JIS X 0213:2004 jp04simplifiedKeiner, verwenden Sie die vereinfachten chinesischen Glyphen smpltraditionalKeiner, verwenden Sie die traditionellen chinesischen Glyphen trad<east-asian-width-values>Diese Werte steuern die Größen von Figuren, die für ostasiatische Zeichen verwendet werden. Zwei Werte sind möglich:
proportional-width, der die Gruppe von ostasiatischen Zeichen aktiviert, die in der Breite variieren. Es entspricht den OpenType-Wertenpwid.full-width, der die Gruppe von ostasiatischen Zeichen aktiviert, die alle dieselbe, ungefähr quadratische Breitenmetrik haben. Es entspricht den OpenType-Wertenfwid.
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-variant-east-asian =
normal|
[<east-asian-variant-values>||<east-asian-width-values>||ruby]
<east-asian-variant-values> =
jis78|
jis83|
jis90|
jis04|
simplified|
traditional
<east-asian-width-values> =
full-width|
proportional-width
Beispiele
Einstellung von Ostasiatischen Glyphenvarianten
Dieses Beispiel erfordert, dass die Schriftart "Yu Gothic" auf Ihrem Betriebssystem installiert ist, andere Schriftarten unterstützen möglicherweise keine OpenType-Funktionen.
HTML
<table> <thead></thead> <tbody> <tr> <th>normal/jis78:</th> <td>麹町</td> <td>麹町</td> </tr> <tr> <th>normal/ruby:</th> <td>しんかんせん</td> <td>しんかんせん</td> </tr> <tr> <th>normal/traditional:</th> <td>大学</td> <td>大学</td> </tr> </tbody></table>CSS
tbody { border: 0;}td { font-family: "Yu Gothic", fantasy; font-size: 20px;}th { color: grey; padding-right: 10px;}.ruby { font-variant-east-asian: ruby;}.jis78 { font-variant-east-asian: jis78;}.traditional { font-variant-east-asian: traditional;}Ergebnis
Spezifikationen
| Specification |
|---|
| CSS Fonts Module Level 4 # font-variant-east-asian-prop |