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.
{{EmbedInteractiveExample("pages/css/font-variant-east-asian.html")}}
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โ
-
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
.
- : 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
-
<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 valuespwid
.full-width
activating the set of East Asian characters which are all of the same, roughly square, width metric. It corresponds to the OpenType valuesfwid
.
-
Formal definitionโ
Formal syntaxโ
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โ
{{EmbedLiveSample('Setting_East_Asian_glyph_variants')}}