<pre class="brush: css notranslate"><code><span class="token property">font-variant-east-asian</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token property">font-variant-east-asian</span><span class="token punctuation">:</span> ruby<span class="token punctuation">;</span> <span class="token property">font-variant-east-asian</span><span class="token punctuation">:</span> jis78<span class="token punctuation">;</span> <span class="token comment">/ &lt;east-asian-variant-values&gt; /</span> <span class="token property">font-variant-east-asian</span><span class="token punctuation">:</span> jis83<span class="token punctuation">;</span> <span class="token comment">/ &lt;east-asian-variant-values&gt; /</span> <span class="token property">font-variant-east-asian</span><span class="token punctuation">:</span> jis90<span class="token punctuation">;</span> <span class="token comment">/ &lt;east-asian-variant-values&gt; /</span> <span class="token property">font-variant-east-asian</span><span class="token punctuation">:</span> jis04<span class="token punctuation">;</span> <span class="token comment">/ &lt;east-asian-variant-values&gt; /</span> <span class="token property">font-variant-east-asian</span><span class="token punctuation">:</span> simplified<span class="token punctuation">;</span> <span class="token comment">/ &lt;east-asian-variant-values&gt; /</span> <span class="token property">font-variant-east-asian</span><span class="token punctuation">:</span> traditional<span class="token punctuation">;</span> <span class="token comment">/ &lt;east-asian-variant-values&gt; /</span> <span class="token property">font-variant-east-asian</span><span class="token punctuation">:</span> full-width<span class="token punctuation">;</span> <span class="token comment">/ &lt;east-asian-width-values&gt; /</span> <span class="token property">font-variant-east-asian</span><span class="token punctuation">:</span> proportional-width<span class="token punctuation">;</span> <span class="token comment">/ &lt;east-asian-width-values&gt; /</span> <span class="token property">font-variant-east-asian</span><span class="token punctuation">:</span> ruby full-width jis83<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">font-variant-east-asian</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">font-variant-east-asian</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">font-variant-east-asian</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">font-variant-east-asian</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>

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: revert; font-variant-east-asian: unset; 

Syntax

Values

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

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.

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

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

Formal definition

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.

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

Specifications

See Also