font-variant-east-asian

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

font-variant-east-asian: normal;
font-variant-east-asian: ruby;
font-variant-east-asian: jis78;              /* <east-asian-variant-values> */
font-variant-east-asian: jis83;              /* <east-asian-variant-values> */
font-variant-east-asian: jis90;              /* <east-asian-variant-values> */
font-variant-east-asian: jis04;              /* <east-asian-variant-values> */
font-variant-east-asian: simplified;         /* <east-asian-variant-values> */
font-variant-east-asian: traditional;        /* <east-asian-variant-values> */
font-variant-east-asian: full-width;         /* <east-asian-width-values> */
font-variant-east-asian: proportional-width; /* <east-asian-width-values> */
font-variant-east-asian: ruby full-width jis83;

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

初期値normal
適用対象全要素。 ::first-letter and ::first-line にも適用されます。
継承継承する
メディアvisual
計算値指定値
アニメーションの種類個別
正規順序形式文法における値の出現順

構文

normal
このキーワードは、別形式の表記の使用を無効にします。
ruby
このキーワードは、ルビ文字のための特殊な表記の使用を強制します。ふつうは小さめで、フォントの作者がよく特定の形状でデザインし、ふつうはコントラストを上げるためにわずかに太くします。このキーワードは OpenType の ruby の値に対応します。
<east-asian-variant-values>
これらの値は、表示に使用される字形の違いのセットを指定します。利用可能な値は以下の通りです。
キーワード 標準による形状の定義 OpenType の対応
jis78 JIS X 0208:1978 jp78
jis83 JIS X 0208:1983 jp83
jis90 JIS X 0208:1990 jp90
jis04 JIS X 0213:2004 jp04
simplified なし。簡体字中国語の字形を使用 smpl
traditional なし。繁体字中国語の字形を使用 trad
<east-asian-width-values>
これらの値は東アジアの文字の大きさを制御します。二つの値が利用できます。
  • proportional-width は、東アジアの文字の幅が多様なセットを有効にします。 OpenType の pwid の値に対応します。
  • full-width は、東アジアの文字がすべて同じ、およそ正方形で、一定幅のセットを有効にします。 OpenType の fwid に対応します。

形式文法

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

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

HTML

<p class="normal">!</p>

CSS

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

結果

Live sample link

仕様書

仕様書 状況 備考
CSS Fonts Module Level 3
font-variant-east-asian の定義
勧告候補 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応63 なし

34

24 — 341

なし50 なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応6363 なし

34

24 — 341

50 なし なし

1. From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,