font-language-overrideプロパティの説明
CSSのfont-language-override
プロパティは、文字を表示する祭に使用する言語情報を一時的に変更します。通常、ブラウザは<html>
のlang
属性に指定された言語情報を基に、表示させるフォントの字形を決定します。これによって、特定の順序で書かれた文字に対して、合字(リガチャ)を行うかどうかが決まります。
例えば、小文字のi
やj
が単語の中に含まれる場合に、点を打つかどうかの判断は言語によって異なります。リガチャを行う場合は点が付かない文字を表示させますが、この時に表示される文字は通常の字形とは別の字形になるのです。
font-language-overrideに指定できる値
normal
<html>
のlang
属性に指定された言語情報に従い、ブラウザが適切なフォントの字形を使用するように要求します。string
- 言語を表すタグで、字形を変更するようにブラウザに要求します。使用できるタグは、OpenType language systemで定義されている文字列と一致するものです。
font-language-overrideの使い方とサンプルコード
font-language-override
プロパティの構文は以下の通りです。
/* キーワード値 */
font-language-override: normal;
/* <string>値 */
font-language-override: "ENG";
font-language-override: "JAN";
/* グローバル値 */
font-language-override: inherit;
font-language-override: initial;
font-language-override: revert;
font-language-override: revert-layer;
font-language-override: unset;
font-language-overrideの実例
それでは実際にfont-language-override
プロパティの書き方を見ていきましょう。以下の例は、欧文フォントのカーニングを有効にした場合と、そうでない場合の比較です。主にペアカーニングの対象となっているアルファベットの組み合わせを確認します。
<section class="samp_box">
<h2>font-language-override: "ENG";</h2>
<p class="flo_eng">The first Japanese name I learned was Fujiyama.</p>
<h2>font-language-override: "TRK";</h2>
<p class="flo_trk">The first Japanese name I learned was Fujiyama.</p>
<h2>font-language-override: "DAN";</h2>
<p class="flo_dan">The first Japanese name I learned was Fujiyama.</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;
}
.flo_eng {
font-language-override: "ENG";
}
.flo_trk {
font-language-override: "TRK";
}
.flo_dan {
font-language-override: "DAN";
}