CSS font-variant-east-asian Property

Description

The font-variant-east-asian CSS property controls how user agents present East Asian text by selecting appropriate glyph variants and typographic behaviors for characters in CJK (Chinese, Japanese, Korean) and related scripts. It governs aspects such as whether punctuation and symbols are rendered in their fullwidth or halfwidth forms, how ideographs are spaced and aligned, and which alternate glyph shapes (for example, simplified vs. traditional forms or different regional variants) are preferred when the chosen font provides such options. The property is meant to express typographic intent for East Asian typography rather than to pick a specific font glyph directly.

This property is a high-level toggle that the browser maps to specific font features and OpenType tables supported by the selected font(s). For finer-grained, low-level control of individual OpenType features you can use font-feature-settings, but relying on font-variant-east-asian allows authors to request culturally appropriate defaults without enumerating vendor-specific feature tags. Because support for particular alternates and layout behaviors depends on the font, it’s important to pair this property with a suitable typeface; choose fonts via the font-family stack that include comprehensive East Asian OpenType features if you need predictable results.

Changes to font-variant-east-asian can affect text metrics and line layout: enabling different glyph shapes or widths can change line breaks, justification, and vertical text flow, and it may affect spacing around punctuation and emphasis marks. For broader typographic control that groups East Asian behavior with other variant categories you can consider coordinating it with font-variant settings so the rendering reflects both regional shaping preferences and other variant needs (like numeric or positional variants). In practice, use this property when you want consistent, culturally aware rendering of CJK text while letting the font and user agent pick the exact feature implementations.

Definition

Initial value: normal
Applies to: All elements
Inherited: Yes
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.fontVariantEastAsian

Interactive Demo

font-variant-east-asian: normal;

font-variant-east-asian: ruby;

font-variant-east-asian: jis78;

font-variant-east-asian: proportional-width;

JIS78とJIS83以降では、檜と桧、籠と篭など、一部の文字の入れ替えが行われている。また、「唖然」や「躯体」などの書体が変更されている。

Syntax

font-variant-east-asian: normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]

Values

normal
<east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]
<east-asian-width-values> = [ full-width | proportional-width ]
ruby

Example

HTML

<body>

  <main class="example">

    <h1>font-variant-east-asian  -  examples</h1>

    <p class="note">Sample: Chinese and Japanese characters, ASCII full-width vs proportional</p>



    <div class="grid">

      <figure class="card normal">

        <figcaption>normal</figcaption>

        <p>漢字漢字 日本語の文字</p>

      </figure>



      <figure class="card traditional">

        <figcaption>traditional</figcaption>

        <p>漢字漢字 日本語の文字</p>

      </figure>



      <figure class="card simplified">

        <figcaption>simplified</figcaption>

        <p>漢字漢字 日本語の文字</p>

      </figure>



      <figure class="card fullwidth">

        <figcaption>full-width</figcaption>

        <p>ｆｕｌｌ－ｗｉｄｔｈ ＡＢＣ １２３</p>

      </figure>



      <figure class="card proportional">

        <figcaption>proportional-width</figcaption>

        <p>ｆｕｌｌ－ｗｉｄｔｈ ＡＢＣ １２３</p>

      </figure>



      <figure class="card ruby">

        <figcaption>ruby</figcaption>

        <p><ruby>漢字<rt>かんじ</rt></ruby> 日本語の文字</p>

      </figure>

    </div>

  </main>

</body>

CSS

/* Base layout and typography */
body {
  font-family: "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
  padding: 32px;
  background: #f7f8fb;
  color: #111;
  -webkit-font-smoothing: antialiased;
}

.example {
  max-width: 980px;
  margin: 0 auto;
}

h1 {
  font-size: 20px;
  margin-bottom: 8px;
}

.note {
  color: #555;
  margin-bottom: 18px;
}

/* Grid of examples */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.card {
  background: #fff;
  padding: 14px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.card figcaption {
  font-weight: 600;
  margin-bottom: 8px;
  color: #222;
}

.card p {
  font-size: 22px;
  line-height: 1.4;
  margin: 0;
}

/* Demonstrate font-variant-east-asian values */
.card.normal p {
  font-variant-east-asian: normal;
}

.card.traditional p {
  font-variant-east-asian: traditional;
}

.card.simplified p {
  font-variant-east-asian: simplified;
}

.card.fullwidth p {
  font-variant-east-asian: full-width;
}

.card.proportional p {
  font-variant-east-asian: proportional-width;
}

.card.ruby p {
  font-variant-east-asian: ruby;
}

/* Small responsive tweak */
@media (max-width: 420px) {
  .card p {
    font-size: 18px;
  }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS font-variant-east-asian property. Hover over a browser icon to see the version that first introduced support for this CSS property.