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の機能に対応しています。
jis78
:JIS X 0208:1978
で定義された形式で、OpenTypeのjp78
に相当します。jis83
:JIS X 0208:1983
で定義された形式で、OpenTypeのjp83
に相当します。jis90
:JIS X 0208:1990
で定義された形式で、OpenTypeのjp90
に相当します。jis04
:JIS 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 | 文字フォントの太さを指定する |