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⁩.

Die font-variant-east-asian CSS 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 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 deaktiviert die Verwendung solcher alternativer Glyphen.

ruby

Dieses Schlüsselwort erzwingt die Verwendung spezieller Glyphen für Ruby-Zeichen. Da diese in der Regel kleiner sind, entwerfen Schriftgestalter oft spezielle Formen, die normalerweise etwas fetter 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 zur 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, Verwendung der vereinfachten chinesischen Glyphen	`smpl`
`traditional`	Keine, Verwendung der traditionellen chinesischen Glyphen	`trad`

<east-asian-width-values>

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

proportional-width, aktiviert die Gruppe ostasiatischer Zeichen, die in der Breite variieren. Dies entspricht den OpenType-Werten pwid.
full-width, aktiviert die Gruppe ostasiatischer Zeichen, die alle die gleiche, ungefähr quadratische Breitenmetrik haben. Dies entspricht den OpenType-Werten fwid.

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

Setzen von ostasiatischen Glyphenvarianten

Dieses Beispiel erfordert die Schriftart "Yu Gothic" auf Ihrem Betriebssystem, andere Schriften 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", 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

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