font-variant-east-asianプロパティの説明
CSSの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プロパティの構文は以下の通りです。
/* キーワード値 */
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プロパティの書き方を見ていきましょう。以下の例は、同じ文章に個別の字形ルールを適用した時の比較です。
<section class="samp_box">
<h2>font-variant-east-asian</h2>
<p class="fvea_norm">normal：学業や壱圓、亜細亜や麹町の比較。しゃしゅしょの字間を確認。</p>
<p class="fvea_ruby">ruby：学業や壱圓、亜細亜や麹町の比較。しゃしゅしょの字間を確認。</p>
<p class="fvea_simp">simplified：学業や壱圓、亜細亜や麹町の比較。しゃしゅしょの字間を確認。</p>
<p class="fvea_trad">traditional：学業や壱圓、亜細亜や麹町の比較。しゃしゅしょの字間を確認。</p>
<p class="fvea_jis78">jis78：学業や壱圓、亜細亜や麹町の比較。しゃしゅしょの字間を確認。</p>
<p class="fvea_jis83">jis83：学業や壱圓、亜細亜や麹町の比較。しゃしゅしょの字間を確認。</p>
<p class="fvea_jis90">jis90：学業や壱圓、亜細亜や麹町の比較。しゃしゅしょの字間を確認。</p>
<p class="fvea_jis04">jis04：学業や壱圓、亜細亜や麹町の比較。しゃしゅしょの字間を確認。</p>
</section>
.samp_box {
overflow: auto;
width: 100%;
margin-top: 1rem;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
.samp_box p {
margin: 1rem 0 0;
padding: .3rem;
background: #fff;
}
.fvea_norm {
font-variant-east-asian: normal;
}
.fvea_ruby {
font-variant-east-asian: ruby;
}
.fvea_simp {
font-variant-east-asian: simplified;
}
.fvea_trad {
font-variant-east-asian: traditional;
}
.fvea_jis78 {
font-variant-east-asian: jis78;
}
.fvea_jis83 {
font-variant-east-asian: jis83;
}
.fvea_jis90 {
font-variant-east-asian: jis90;
}
.fvea_jis04 {
font-variant-east-asian: jis04;
}