font-variant-east-asian

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis janvier 2020.

La propriétéCSSfont-variant-east-asian contrôle l'utilisation des glyphes alternatifs pour les scripts japonais, chinois et d'Asie orientale.

Exemple interactif

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;}

Syntaxe

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;/* Valeurs globales */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;

Valeurs

normal

Ce mot-clé désactive les glyphes alternatifs.

ruby

Ce mot-clé force l'utilisation de glyphes spécifiques pour les caractères ruby. Généralement, ceux-ci sont plus petits et légèrement plus gras pour améliorer le contraste. Ce mot-clé correspond aux valeurs OpenTyperuby.

<east-asian-variant-values>

Ces valeurs définissent un ensemble de variantes de glypes logographiques à utiliser pour l'affichage. Les valeurs possibles sont :

Mot-clé	Standard dans lequel sont définis les glyphs	Équivalent OpenType
`jis78`	JIS X 0208:1978^(angl.)	`jp78`
`jis83`	JIS X 0208:1983^(angl.)	`jp83`
`jis90`	JIS X 0208:1990^(angl.)	`jp90`
`jis04`	JIS X 0213:2004^(angl.)	`jp04`
`simplified`	Aucun, ce sont les glyphes chinois simplifiés qui sont utilisés.	`smpl`
`traditional`	Aucun, ce sont les glyphes chinois traditionnels qui sont utilisés.	`trad`

<east-asian-width-values>

Ces valeurs permettent de contrôler le dimensionnement des symboles pour les caractères des langues d'Asie orientale. Deux valeurs sont possibles :

proportional-width qui active l'ensemble de caractères d'Asie orientale qui n'ont pas tous la même largeur. Elle correspond aux valeurs OpenTypepwid.
full-width qui active l'ensemble de caractères d'Asie orientale où les caractères ont tous la même taille et forme carrée. Elle correspond aux valeurs OpenTypefwid.

Définition formelle

Valeur initiale	`normal`
Applicabilité	tous les éléments et le texte. S'applique aussi à`::first-letter` et`::first-line`.
Héritée	oui
Valeur calculée	comme défini
Type d'animation	discrète

Syntaxe formelle

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

Exemples

Définir les variantes de glyphes d'Asie orientale

Cet exemple nécessite que la police « Yu Gothic » soit installée sur votre système d'exploitation, d'autres polices peuvent ne pas prendre en charge les fonctionnalités OpenType.

HTML

html

<table>  <thead></thead>  <tbody>    <tr>      <th>normal/jis78&nbsp;:</th>      <td>麹町</td>      <td>麹町</td>    </tr>    <tr>      <th>normal/ruby&nbsp;:</th>      <td>しんかんせん</td>      <td>しんかんせん</td>    </tr>    <tr>      <th>normal/traditional&nbsp;:</th>      <td>大学</td>      <td>大学</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;}