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.
Thefont-variant-east-asianCSS property controls the use of alternate glyphs for East Asian scripts, like Japanese and Chinese.
Try it
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;}Syntax
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;Values
normalThis keyword leads to the deactivation of the use of such alternate glyphs.
rubyThis 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 jis78JIS X 0208:1978 jp78jis83JIS X 0208:1983 jp83jis90JIS X 0208:1990 jp90jis04JIS X 0213:2004 jp04simplifiedNone, use the simplified Chinese glyphs smpltraditionalNone, 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-widthactivating the set of East Asian characters which vary in width. It corresponds to the OpenType valuespwid.full-widthactivating the set of East Asian characters which are all of the same, roughly square, width metric. It corresponds to the OpenType valuesfwid.
Formal definition
| Initial value | normal |
|---|---|
| Applies to | all elements and text. It also applies to::first-letter and::first-line. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Formal 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
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> <tr> <th>normal/jis78:</th> <td>麹町</td> <td>麹町</td> </tr> <tr> <th>normal/ruby:</th> <td>しんかんせん</td> <td>しんかんせん</td> </tr> <tr> <th>normal/traditional:</th> <td>大学</td> <td>大学</td> </tr> </tbody></table>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;}Result
Specifications
| Specification |
|---|
| CSS Fonts Module Level 4 # font-variant-east-asian-prop |