font-language-override：文字を表示する祭に使用する言語情報を一時的に変更する
| 初期値 | normal |
| 適用対象 | 全ての要素、::first-letterおよび::first-line |
| 継承 | する |
| アニメーション | 離散値 |
| 対応ブラウザ | caniuseで確認 |
font-language-overrideプロパティの説明
font-language-overrideは、文字を表示する祭に使用する言語情報を一時的に変更します。通常、ブラウザは<html>のlang属性に指定された言語情報を基に、表示させるフォントの字形を決定します。これによって、特定の順序で書かれた文字に対して、合字（リガチャ）を行うかどうかが決まります。
例えば、小文字のiやjが単語の中に含まれる場合に、点を打つかどうかの判断は言語によって異なります。リガチャを行う場合は点が付かない文字を表示させますが、この時に表示される文字は通常の字形とは別の字形になるのです。
font-language-overrideに指定できる値
- normal
<html>のlang属性に指定された言語情報に従い、ブラウザが適切なフォントの字形を使用するように要求します。- string
- 言語を表すタグで、字形を変更するようにブラウザに要求します。使用できるタグは、OpenType language systemで定義されている文字列と一致するものです。
font-language-overrideの使い方とサンプル
font-language-overrideプロパティの構文は以下の通りです。
CSS
/* キーワード値 */
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プロパティの書き方を見ていきましょう。以下の例は、欧文フォントのカーニングを有効にした場合と、そうでない場合の比較です。主にペアカーニングの対象となっているアルファベットの組み合わせを確認します。
表示確認
CSS
.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";
}
HTML
<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>
font-language-overrideに関連する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 | 文字フォントの太さを指定する |