CSS font-variant-east-asian Property

❮ Prev Next ❯

The font-variant-east-asian property controls the usage of alternate glyphs for East Asian scripts. In particular, it is used to control glyph substitution and sizing in East Asian texts.

This property is one of the CSS3 properties.

Initial Value	normal
Applies to	All elements. It also applies to ::first-letter and ::first-line.
Inherited	Yes.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.fontVariantEastAsian = "ruby";

Syntax

font-variant-east-asian: normal | <east-asian-variant-values> | <east-asian-width-values> | ruby | initial | inherit ;

Example of the font-variant-east-asian property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h2 {
        font-variant-east-asian: traditional;
      }
    </style>
  </head>
  <body>
    <h2>Font-variant-east-asian property example</h2>
    <h2>大学 → 大學</h2>
  </body>
</html>

Try it Yourself »

You can see here that the font-variant-east-asian property is set to traditional. You can change it to any of the values mentioned in the table below this page, including the simplified variant.

Result

Values

Value	Description
normal	The use of alternate glyphs are not enabled.
<east-asian-variant-values>	Specifies a set of logographic glyph variants which are be used for display. Values are: jis78 jis83 jis90 jis04 simplified traditional
<east-asian-width-values>	Controls the sizing of figures used for East Asian characters. Values are: proportional-width full-width
ruby	Forces the use of special glyphs for ruby characters.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.