font-variant-east-asian:東アジアの言語で使われる字体を制御する

初期値 normal
適用対象 全ての要素、::first-letterおよび::first-line
継承 する
アニメーション 離散値
対応ブラウザ caniuseで確認

font-variant-east-asianプロパティの説明

font-variant-east-asianは、東アジアの言語で使われる字体を制御します。これはJIS規格やOpenTypeの特性が有効な漢字を含むフォントで機能します。

font-variant-east-asianに指定できる値

normal
別形式の表記を無効にします。これが初期値です。
ruby
ルビ文字のために特殊な表記を使用します。ルビ文字は通常の字体よりも小さく、視認性を担保するためにわずかに太くなっていくことが多いです。これはOpenTypeのrubyに相当します。
<east-asian-variant-values>
表示される文字セットを表すキーワード値です。キーワードはあらかじめ定義されたものがあり、JIS規格やOpenTypeの機能に対応しています。
  • jis78JIS X 0208:1978で定義された形式で、OpenTypeのjp78に相当します。
  • jis83JIS X 0208:1983で定義された形式で、OpenTypeのjp83に相当します。
  • jis90JIS X 0208:1990で定義された形式で、OpenTypeのjp90に相当します。
  • jis04JIS X 0213:2004で定義された形式で、OpenTypeのjp04に相当します。
  • simplified:簡体字の字形を使用します。OpenTypeのsmplに相当します。
  • traditional:繁体字の字形を使用します。OpenTypeのtradに相当します。
<east-asian-width-values>
表示する文字とグリフの幅の関係を表します。指定できる値は以下のキーワードです。
  • proportional-width:文字ごとに固有の幅を持ったプロポーショナルな字体で表示します
  • full-width:正方形のグリフで統一された等幅の字体で表示します

font-variant-east-asianの使い方とサンプル

font-variant-east-asianプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
font-variant-east-asian: normal;
font-variant-east-asian: ruby;

/* <east-asian-variant-values>値 */
font-variant-east-asian: jis78;
font-variant-east-asian: jis83;
font-variant-east-asian: jis90;
font-variant-east-asian: jis04;
font-variant-east-asian: simplified;
font-variant-east-asian: traditional;

/* <east-asian-width-values>値 */
font-variant-east-asian: full-width;
font-variant-east-asian: proportional-width;

/* 複数指定 */
font-variant-east-asian: ruby jis90 full-width;

/* グローバル値 */
font-variant-east-asian: inherit;
font-variant-east-asian: initial;
font-variant-east-asian: revert;
font-variant-east-asian: unset;

font-variant-east-asianの実例

それでは実際にfont-variant-east-asianプロパティの書き方を見ていきましょう。以下の例は、同じ文章に個別の字形ルールを適用した時の比較です。

表示確認

font-variant-east-asianに関連するCSSプロパティ

フォント・文字色
color 文字の色を指定する
font フォントに関する様々な機能を一括で指定する
font-family 文字フォントの種類を指定する
font-feature-settings OpenTypeフォントの拡張書体の特性を制御する
font-kerning フォントの文字詰め(カーニング)を制御する
font-language-override 文字を表示する祭に使用する言語情報を一時的に変更する
font-size 文字フォントの大きさを指定する
font-size-adjust 現在のフォントサイズを基準に小文字の大きさを相対的に調整する
font-stretch 表示させるフォントの幅広や幅狭のフェイスを指定する
font-style フォントを筆記体や斜体で表示するかどうかを指定する
font-synthesis 太字や斜体に対応していないフォントの加工を制御する
font-variant フォントの表示形式やブラウザの合成規則を一括で指定する
font-variant-alternates 文字フォントの代替字体(グリフ)の選定を制御する
font-variant-caps 文字列に適用されるキャピタライゼーションルールを制御する
font-variant-east-asian 東アジアの言語で使われる字体を制御する
font-variant-ligatures 隣り合った文字フォントの合字(リガチャ)を制御する
font-variant-numeric 数値に関する文字表記を制御する
font-variant-position 上付き文字や下付き文字として配置されるべき字体の使用を制御する
font-weight 文字フォントの太さを指定する