CSS – 言語ごとにフォントを指定するfont-language-overrideの使い方と注意点

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はCSS3から新たに追加されたプロパティのため、現時点では使用できるブラウザが限られています。

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