:lang()

概要

HTML要素のlang属性や、HTTPヘッダー、メタ情報などから判定される言語に基づいてスタイルを適用します。多言語サイトで言語ごとにフォントや文字間隔を調整する場合に有用です。ワイルドカード的なマッチング（:lang(zh)でzh-Hansにもマッチ）もサポートしています。

対応ブラウザ

基本構文

:lang(ja) {
  font-family: 'Noto Sans JP', sans-serif;
}
:lang(en) {
  font-family: 'Inter', sans-serif;
}

実務での使いどころ

• 言語別フォントの自動切り替え

  日本語コンテンツには日本語フォント、英語コンテンツには欧文フォントを自動的に適用し、各言語に最適な表示を実現します。

注意点

アクセシビリティ

• 正しいlang属性の設定はスクリーンリーダーの発音に直接影響するため、:lang()の使用と合わせてlang属性の正確性を確認してください。

参考リンク

• MDN Web Docs — :lang()