CSS font-variant-east-asian Property

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

Watch a video course   CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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>

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.

Browser support
63.0+ 34.0+ 9.1+ 50.0+

Prev
Next

Related Resources

Do you find this helpful?

Related articles