CSSで文字の装飾を施すと、フォントや文字サイズ、文字色や背景色など、様々な要素を変更できますが、言語ごとにフォントの装飾を施せる機能があるのをご存じですか？
言語ごとにフォントを設定するfont-language-overrideの使い方は？
今回は、font-language-overrideの
・基本的な使い方
・具体的なfont-language-overrideの使用例
について説明します。
目次
font-language-overrideとは
font-language-overrideの読み方
font-language-overrideプロパティは、「フォントランゲージオーバーライド」と読みます。
font-language-overrideの説明
font-language-overrideはその名の通り、特定の言語だけにフォントを上書きする機能を持っています。Webサイト作成時によく英語と日本語が混同する場合がありますが、その際に便利なのが、このfont-language-overrideプロパティなのです。
font-language-overrideで利用できる値
font-language-overrideでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| normal | lang属性で指定された言語に適切なフォントを表示します。 |
| string | 文字列で指定された言語に適切なフォントを指定します。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 3 |
| Edge | 未対応 |
| Firefox | 34 |
| nternet Explorer | 未対応 |
| Opera | 未対応 |
| Safari | 未対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 未対応 |
| Android版Chrome | 未対応 |
| Android版Firefox | 未対応 |
| Android 版 Opera | 未対応 |
| iOS版Safari | 未対応 |
| Samsung Internet | 未対応 |
font-language-overrideの基本的な使い方
font-language-overrideの使い方
では早速font-language-overrideの使用例を見ていきましょう。設定方法は簡単！まずはpタグやbodyタグなど、HTMLの要素に言語を指定するlang属性を書きましょう。
次にCSSでそのタグを指定し、【font-language-override】を適用します。言語の指定は必ずダブルクォーテーション（“”）で囲い、指定はMicrosoftが指定するOpenType Layout Tag Registryで表記されているものを使用します。
See the Pen
font-language-override by rabbittyu (@rabbittyu)
on CodePen.
font-language-overrideの応用的な使い方
しかし上記の使用例では、【font-language-override】を使用する意味があまりわかりません。ですがHTML文書を最初から組み立てる際に、lang属性でページ全体の言語を指定した際に、局所的に言語を変更した際に役立つのです。
以下の例では、ページ全体の言語を日本語の”ja”に設定していますが、英部のみ個別で”en”を指定しています。
See the Pen
font-language-override例2 by rabbittyu (@rabbittyu)
on CodePen.
lang属性の言語コードに関しては、次のページが参考になるでしょう。
まとめ
今回は言語を個別に指定するfont-language-overrideプロパティについて解説しました。現時点では実装されているブラウザ環境が少ないため、まだ正式に取り入れるには早いかもしれません。
しかし特に翻訳サイトや多言語に対応しているサイトなど、様々な言語を扱うサイトではかなり活用できる要素ですので、そういったサイトを作成している方は少し練習してみるのも良いでしょう。
参考文献：
MDN web docks font-language-override
CSS – font-language-override – とほほのWWW入門
cman.jp
みんなの知識 ちょっと便利帳
Microsoft document
