Lazy Diary @ Hatena Blog

PowerShell / Java / miscellaneous things about software development, Tips & Gochas. CC BY-SA 4.0/Apache License 2.0

ChromeにおけるCSSでのフォント優先度指定とIVSの関係

以下のHTMLでテストした。

Test for Font Link and IVS on HTML · GitHub

  • font-familyが指定されていない場合、ブラウザのデフォルトフォントが使用される
    • デフォルトフォントにBase Characterがない文字は、OSの機能でフォールバックされる模様。\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontLink\SystemLinkMeiryo, \HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontMapperFamilyFallback, \HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontMapper の設定のうちいずれが使われているのかは分からなかった。
  • font-familyが指定されている場合場合、指定したフォントが使用される
    • 指定したフォントにBase Characterがない文字は、ブラウザのデフォルトフォントにフォールバックされる
      • ブラウザのデフォルトフォントにBase Characterがない文字は、OSの機能でフォールバックされる模様
    • 指定したフォントにBase Characterがあるが指定したIVSに対応するグリフがない場合は、指定したフォントのBase Characterにフォールバックされる
  • font-familyが複数指定されている場合、優先度の高いものから探してBase Characterが最初に見つかったフォントが使用される
    • 指定したフォントのいずれにもBase Characterがない文字は、ブラウザのデフォルトフォントにフォールバックされる
    • 指定したフォントの中からBase Characterが見つかったが、指定したIVSに対応するグリフがない場合は、Base Characterが見つかったフォントのBase Characterにフォールバックされる

使用されているフォントに、指定したIVSに対応するグリフが実装されている場合は、異体字が表示されてブラウザの文字数カウント*1は1 glyph、実装されていない場合は2 glyphsとなる。

*1:DOM上の要素を指定してコンテキストメニューから[検証]をすると、[DevTools]-[Elements]-[Computed]-[Rendered Fonts]で各フォントが使用されているグリフ数が表示される