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é CSS font-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 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;
}

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 OpenType ruby.

<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 OpenType pwid.
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 OpenType fwid.

Définition formelle

Valeur initiale	`normal`
Applicabilité	all elements and text. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	oui
Valeur calculée	comme spécifié
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 class="jis78">麹町</td>
    </tr>
    <tr>
      <th>normal/ruby&nbsp;:</th>
      <td>しんかんせん</td>
      <td class="ruby">しんかんせん</td>
    </tr>
    <tr>
      <th>normal/traditional&nbsp;:</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;
}

Résultat

Spécifications

Specification
CSS Fonts Module Level 4 # font-variant-east-asian-prop

Compatibilité des navigateurs

Voir aussi

La propriété raccourcie font-variant
La propriété font-variant-alternates
La propriété font-variant-caps
La propriété font-variant-emoji
La propriété font-variant-ligatures
La propriété font-variant-numeric
La propriété font-variant-position

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 6 févr. 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content