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;
normal
ruby
ruby
.<east-asian-variant-values>
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>
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
.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 |
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 ]
This example require font "Yu Gothic" installed in your OS, other fonts may not support OpenType features.
<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>
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; }
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 3 The definition of 'font-variant-east-asian' in that specification. | Candidate Recommendation | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
font-variant-east-asian |
63 | 79 | 34
|
No | 50 | No |
Mobile | ||||||
---|---|---|---|---|---|---|
font-variant-east-asian |
63 | 63 | 34
|
46 | No | 8.0 |
© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian