Web/CSS/font-variant-east-asian

The font-variant-east-asian CSS property controls the use of alternate glyphs for East Asian scripts, like Japanese and Chinese.

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: unset;

Syntax

Values

normal

This keyword leads to the deactivation of the use of such alternate glyphs.

ruby

This keyword forces the use of special glyphs for ruby characters. As these are usually smaller, font creators often designs specific forms, usually slightly bolder to improve the contrast. This keyword corresponds to the OpenType values ruby.

<east-asian-variant-values>

These values specify a set of logographic glyph variants which should be used for display. Possible values are:

Keyword	Standard defining the glyphs	OpenType equivalent
`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`	None, use the simplified Chinese glyphs	`smpl`
`traditional`	None, use the traditional Chinese glyphs	`trad`

<east-asian-width-values>

These values control the sizing of figures used for East Asian characters. Two values are possible:

proportional-width activating the set of East Asian characters which vary in width. It corresponds to the OpenType values pwid.
full-width activating the set of East Asian characters which are all of the same, roughly square, width metric. It corresponds to the OpenType values fwid.

Formal definition

Initial value	`normal`
Applies to	all elements. It also applies to `::first-letter` and `::first-line`.
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]where <east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]<east-asian-width-values> = [ full-width | proportional-width ]

Examples

Setting East Asian glyph variants

This example require font "Yu Gothic" installed in your OS, other fonts may not support OpenType features.

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

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

Result

Specifications

Specification	Status	Comment
CSS Fonts Module Level 3The definition of 'font-variant-east-asian' in that specification.	Candidate Recommendation	Initial definition

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`font-variant-east-asian`	Chrome Full support 63	Edge Full support 79	Firefox Full support 34 Full support 34 No support 24 — 34 Disabled' Disabled' From version 24 until version 34 (exclusive): this feature is behind the `layout.css.font-features.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 50	Safari No support No	WebView Android Full support 63	Chrome Android Full support 63	Firefox Android Full support 34 Full support 34 No support 24 — 34 Disabled' Disabled' From version 24 until version 34 (exclusive): this feature is behind the `layout.css.font-features.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Full support 46	Safari iOS No support No	Samsung Internet Android Full support 8.0

Legend

Full support: Full support
No support: No support
User must explicitly enable this feature.': User must explicitly enable this feature.

font-variant-east-asian by Mozilla Contributors is licensed under CC-BY-SA 2.5.