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 January 2020.

Die font-variant-east-asian CSS Eigenschaft steuert die Verwendung alternativer Glyphen für ostasiatische Schriften wie Japanisch und Chinesisch.

Probieren Sie es aus

Syntax

css
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

normal

Dieses Schlüsselwort führt zur Deaktivierung der Verwendung solcher alternativer Glyphen.

ruby

Dieses Schlüsselwort erzwingt die Verwendung spezieller Glyphen für Rubyschriftzeichen. Da diese normalerweise kleiner sind, entwerfen Schriftgestalter oft spezifische Formen, die in der Regel leicht fett sind, um den Kontrast zu verbessern. Dieses Schlüsselwort entspricht den OpenType-Werten ruby.

<east-asian-variant-values>

Diese Werte spezifizieren eine Reihe von logografischen Glyphenvarianten, die für die Anzeige verwendet werden sollen. Mögliche Werte sind:

Schlüsselwort Standard, der die Glyphen definiert OpenType-Äquivalent
jis78 JIS X 0208:1978 jp78
jis83 JIS X 0208:1983 jp83
jis90 JIS X 0208:1990 jp90
jis04 JIS X 0213:2004 jp04
simplified Keiner, verwenden Sie die vereinfachten chinesischen Glyphen smpl
traditional Keiner, verwenden Sie die traditionellen chinesischen Glyphen trad
<east-asian-width-values>

Diese Werte steuern die Größeneinstellung der für ostasiatische Zeichen verwendeten Ziffern. Zwei Werte sind möglich:

  • proportional-width aktiviert das Set ostasiatischer Zeichen, die in der Breite variieren. Es entspricht den OpenType-Werten pwid.
  • full-width aktiviert das Set ostasiatischer Zeichen, die alle die gleiche, ungefähr quadratische Breitenmetrik aufweisen. Es entspricht den OpenType-Werten fwid.

Formale Definition

Anfangswertnormal
Anwendbar aufall elements and text. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

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 ostasiatischer Glyphenvarianten

Dieses Beispiel erfordert die im Betriebssystem installierte Schriftart "Yu Gothic", andere Schriftarten unterstützen möglicherweise keine OpenType-Features.

HTML

html
<table>
  <thead></thead>
  <tbody style="border:0;">
    <tr>
      <th>normal/jis78:</th>
      <td>麹町</td>
      <td class="jis78">麹町</td>
    </tr>
    <tr>
      <th>normal/ruby:</th>
      <td>しんかんせん</td>
      <td class="ruby">しんかんせん</td>
    </tr>
    <tr>
      <th>normal/traditional:</th>
      <td>大学</td>
      <td class="traditional">大学</td>
    </tr>
  </tbody>
</table>

CSS

css
td {
  font-family: "Yu Gothic";
  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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch