このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
font-variant-east-asian
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
font-variant-east-asian はCSS のプロパティで、日本語や中国語のような東アジアの字形の違いを制御するために使用します。
試してみましょう
font-variant-east-asian: normal;font-variant-east-asian: ruby;font-variant-east-asian: jis78;font-variant-east-asian: proportional-width;<section> <div> <p> JIS78 と JIS83 以降では、檜と桧、籠と篭など、一部の文字の入れ替えが行われている。また、「唖然」や「躯体」などの書体が変更されている。 </p> </div></section>section { font-family: "YuGothic Medium", "YuGothic", "Yu Gothic Medium", "Yu Gothic", sans-serif; margin-top: 10px; font-size: 1.5em;}構文
css
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: revert;font-variant-east-asian: revert-layer;font-variant-east-asian: unset;値
normalこのキーワードは、別形式の表記の使用を無効にします。
rubyこのキーワードは、ルビ文字のための特殊な表記の使用を強制します。ふつうは小さめで、フォントの作者がよく特定の形状でデザインし、ふつうはコントラストを上げるためにわずかに太くします。このキーワードは OpenType の
rubyの値に対応します。<east-asian-variant-values>これらの値は、表示に使用される字形の違いのセットを指定します。利用可能な値は以下の通りです。
キーワード 標準による形状の定義 OpenType の対応 jis78JIS X 0208:1978 jp78jis83JIS X 0208:1983 jp83jis90JIS X 0208:1990 jp90jis04JIS X 0213:2004 jp04simplifiedなし。簡体字中国語の字形を使用 smpltraditionalなし。繁体字中国語の字形を使用 trad<east-asian-width-values>これらの値は東アジアの文字の大きさを制御します。2 つの値が利用できます。
proportional-widthは、東アジアの文字の幅が多様なセットを有効にします。 OpenType のpwidの値に対応します。full-widthは、東アジアの文字がすべて同じ、およそ正方形で、一定幅のセットを有効にします。 OpenType のfwidに対応します。
公式定義
| 初期値 | normal |
|---|---|
| 適用対象 | すべての要素とテキスト。::first-letterおよび::first-line にも適用されます。 |
| 継承 | あり |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式定義
font-variant-east-asian =
normal|
[<east-asian-variant-values>||<east-asian-width-values>||ruby]
<east-asian-variant-values> =
jis78|
jis83|
jis90|
jis04|
simplified|
traditional
<east-asian-width-values> =
full-width|
proportional-width
例
東アジアの字形の変化形を設定
この例は OS に「游ゴシック」フォントがインストールされていることが必要です。ほかのフォントでは OpenType 機能に対応していない可能性があります。
HTML
html
<table> <thead></thead> <tbody> <tr> <th>normal/jis78:</th> <td>麹町</td> <td>麹町</td> </tr> <tr> <th>normal/ruby:</th> <td>しんかんせん</td> <td>しんかんせん</td> </tr> <tr> <th>normal/traditional:</th> <td>大学</td> <td>大学</td> </tr> </tbody></table>CSS
css
tbody { border: 0;}td { font-family: "Yu Gothic", fantasy; font-size: 20px;}th { color: grey; padding-right: 10px;}.ruby { font-variant-east-asian: ruby;}.jis78 { font-variant-east-asian: jis78;}.traditional { font-variant-east-asian: traditional;}結果
仕様書
| Specification |
|---|
| CSS Fonts Module Level 4 # font-variant-east-asian-prop |