Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

font-variant-east-asian

font-variant-east-asian は CSS のプロパティで、日本語や中国語のような東アジアの字形の違いを制御するために使用します。

東アジア字形CJKフォント

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
font-variant-east-asian
63
79
34
9.1
63
9.3
full-width
63
79
34
9.1
63
9.3
jis04
63
79
34
9.1
63
9.3
jis78
63
79
34
9.1
63
9.3
jis83
63
79
34
9.1
63
9.3
jis90
63
79
34
9.1
63
9.3
normal
63
79
34
9.1
63
9.3
proportional-width
63
79
34
9.1
63
9.3
ruby
63
79
34
9.1
63
9.3
simplified
63
79
34
9.1
63
9.3
traditional
63
79
34
9.1
63
9.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.jis2004 {
  font-variant-east-asian: jis04;
}
.proportional-cjk {
  font-variant-east-asian: proportional-width;
}
.traditional { font-variant-east-asian: traditional; }

ライブデモ

Jis2004charactershape

CSS JIS2004charactershape demo.

プレビュー全画面表示

propo-shonal

CSS propo-shonal demo.

プレビュー全画面表示

full-widthwidth

CSS full-widthwidth demo.

プレビュー全画面表示

実務での使いどころ

  • JIS規格に基づく字形指定

    公的文書でJIS2004字形を使用し、「辻」「葛」などの漢字を正確な字形で表示します。

注意点

  • フォントが指定されたJIS規格のグリフバリエーションをサポートしていない場合、効果がありません。使用フォントの対応状況を確認してください。

アクセシビリティ

  • 字形の切り替えはテキストの意味に影響しないため、スクリーンリーダーの読み上げは変わりません。

参考リンク