CSSの「font-language-override」で多言語環境のテキスト表示を最適化する

CSSの「Miscellaneous」における「font-language-override」解説

font-language-overrideは、フォントで使用される言語システムを指定し、lang属性で指定されたデフォルトの言語を上書きするCSSプロパティです。これは、デフォルトのフォント言語がコンテンツの言語と一致しない場合に、テキストが正しく表示されるようにするために使用できます。

使い方

font-language-overrideは以下の2つの値を受け取ります。

• normal：デフォルトの動作。lang属性で指定された言語に適したフォントグリフを使用します。
• <string>：言語コード。指定された言語のフォントグリフを使用します。例：font-language-override: "ja"は日本語のフォントグリフを使用します。

例

<p lang="en">This is English text.</p>
<p lang="ja">これは日本語のテキストです。</p>

p {
  font-family: sans-serif;
}

p[lang="ja"] {
  font-language-override: "ja";
}

上記の場合、最初の段落は英語のフォントグリフで、2番目の段落は日本語のフォントグリフで表示されます。

注意点

• font-language-overrideは、フォントに言語固有のグリフが含まれている必要があることに注意してください。そうでない場合、このプロパティは効果がありません。
• このプロパティは、lang属性と組み合わせて使用することをお勧めします。

font-language-override サンプルコード

特定の言語に対してフォントファミリーを変更する

<p lang="en">This is English text.</p>
<p lang="ja">これは日本語のテキストです。</p>

p {
  font-family: sans-serif;
}

p[lang="ja"] {
  font-language-override: "ja";
  font-family: "游ゴシック", sans-serif;
}

リガチャを無効にする

<p lang="en">This is a ligature test.</p>

p {
  font-family: "Noto Sans", sans-serif;
  font-language-override: "fi"; /* リガチャを無効にする */
}

上記の場合、"fi" のリガチャが無効になり、"f" と "i" が個別に表示されます。

複数の言語に対して設定する

<p lang="en">This is English text.</p>
<p lang="ja">これは日本語のテキストです。</p>
<p lang="es">Este es un texto en español.</p>

p {
  font-family: sans-serif;
}

p[lang="ja"] {
  font-language-override: "ja";
  font-family: "游ゴシック", sans-serif;
}

p[lang="es"] {
  font-language-override: "es";
  font-family: "Roboto", sans-serif;
}

上記の場合、それぞれの言語に対して設定したフォントファミリーで表示されます。

lang属性と組み合わせて使用する

<p lang="en">This is English text.</p>
<p lang="ja">これは日本語のテキストです。</p>

p {
  font-family: sans-serif;
}

p[lang="en"]:lang(ja) {
  font-language-override: "ja";
  font-family: "游ゴシック", sans-serif;
}

上記の場合、lang="en"かつlang="ja"である要素のみ、日本語のフォントファミリーで表示されます。

• 上記はあくまでもサンプルコードであり、実際の使用例に合わせて調整する必要があります。
• font-language-overrideは比較的新しいプロパティなので、すべてのブラウザで対応しているわけではありません。

font-language-override の代替方法

@font-face ルールを使用すると、特定の言語に対して異なるフォントファイルを指定することができます。

@font-face {
  font-family: "My Japanese Font";
  src: url("https://example.com/fonts/japanese.woff2");
  font-language-override: "ja";
}

p {
  font-family: sans-serif;
}

p[lang="ja"] {
  font-family: "My Japanese Font";
}

上記の場合、日本語のテキストは "My Japanese Font" で表示されます。

lang属性と組み合わせてフォントファミリーを変更することで、異なる言語に対して異なるフォントを指定することができます。

<p lang="en">This is English text.</p>
<p lang="ja">これは日本語のテキストです。</p>

p {
  font-family: sans-serif;
}

p[lang="ja"] {
  font-family: "游ゴシック", sans-serif;
}

上記の場合、日本語のテキストは "游ゴシック" で表示されます。

JavaScriptを使用すると、動的にフォントを変更することができます。

<p lang="en">This is English text.</p>
<p lang="ja">これは日本語のテキストです。</p>

const elements = document.querySelectorAll("p");

for (const element of elements) {
  const lang = element.getAttribute("lang");
  if (lang === "ja") {
    element.style.fontFamily = "游ゴシック";
  }
}

上記の場合、日本語のテキストは "游ゴシック" で表示されます。

font-language-override は、フォントの言語システムを指定する便利なプロパティですが、すべてのブラウザで対応しているわけではありません。そのため、代替方法を検討することが必要です。