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 January 2020.
font-variant-east-asian
は CSS のプロパティで、日本語と中国語のような東アジアの字形の違いを制御するために使用します。
試してみましょう
構文
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 の対応 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>
-
これらの値は東アジアの文字の大きさを制御します。2 つの値が利用できます。
proportional-width
は、東アジアの文字の幅が多様なセットを有効にします。 OpenType のpwid
の値に対応します。full-width
は、東アジアの文字がすべて同じ、およそ正方形で、一定幅のセットを有効にします。 OpenType のfwid
に対応します。
公式定義
初期値 | normal |
---|---|
適用対象 | すべての要素とテキスト。 ::first-letter および::first-line にも適用されます。 |
継承 | あり |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式定義
例
東アジアの字形の変化形を設定
この例は OS に「游ゴシック」フォントがインストールされていることが必要です。ほかのフォントでは OpenType 機能に対応していない可能性があります。
HTML
html
<table>
<thead></thead>
<tbody style="border:0;">
<tr>
<th>normal/jis78:</th>
<td>麹町</td>
<td class="jis78">麹町</td>
</tr>
<tr>
<th>normal/ruby:</th>
<td>しんかんせん</td>
<td class="ruby">しんかんせん</td>
</tr>
<tr>
<th>normal/traditional:</th>
<td>大学</td>
<td class="traditional">大学</td>
</tr>
</tbody>
</table>
CSS
css
td {
font-family: "Yu Gothic";
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 |
ブラウザーの互換性
BCD tables only load in the browser