CSS font-variant-east-asian Property
Use the font-variant-east-asian CSS property for controlling variants and sizing of alternate glyphs in East Asian text. Read about the function of this property and try examples.
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
Syntax of CSS font-variant-east-asian Property
font-variant-east-asian: normal | <east-asian-variant-values> | <east-asian-width-values> | ruby | initial | inherit ;Example of the font-variant-east-asian property:
Example of CSS font-variant-east-asian Property with traditional value
<!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>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. Note: Browser support for this property is limited. The example relies on system fonts that include traditional East Asian variants.
Result
Values
| Value | Description |
|---|---|
| normal | The use of alternate glyphs is not enabled. |
<east-asian-variant-values> | Specifies a set of logographic glyph variants which are 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. |
Practice
What does the 'font-variant-east-asian' property in CSS do?