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-Eigenschaft von CSS 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 id="default-example">
  <div id="example-element">
    <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

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, gestalten Schriftentwickler oft spezifische Formen, die normalerweise etwas fettgedruckter sind, um den Kontrast zu verbessern. Dieses Schlüsselwort entspricht den OpenType-Werten ruby.

<east-asian-variant-values>

Diese Werte geben eine Reihe von logografischen Glyphenvarianten an, 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 Keine, verwenden Sie die vereinfachten chinesischen Glyphen smpl
traditional Keine, verwenden Sie die traditionellen chinesischen Glyphen trad
<east-asian-width-values>

Diese Werte steuern die Größenanpassung von Figuren, die für ostasiatische Schriftzeichen verwendet werden. Zwei Werte sind möglich:

  • proportional-width aktiviert die Gruppe ostasiatischer Schriftzeichen, die in der Breite variieren. Es entspricht den OpenType-Werten pwid.
  • full-width aktiviert die Gruppe ostasiatischer Schriftzeichen, 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

Festlegen von ostasiatischen Glyphenvarianten

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

HTML

html
<table>
  <thead></thead>
  <tbody>
    <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
tbody {
  border: 0;
}

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

Siehe auch