次期 Windows で Chrome (Edge) のデフォルト表示が Noto フォントになりそうなので、ズレない CSS を追加する
TL;DR
今後のデフォルトの Noto Sans を尊重するのであれば text-box: trim-both ex alphabetic でハーフリーディングを除去して上下の位置を合わせる。
もしくは、明示的に font-family: Meiryo を指定して Noto Sans で表示されないようにする。
Windows での Noto フォントの標準搭載
現在の Release Preview 版の Windows では Noto フォントが標準搭載されるようになっている。
[Noto Fonts] This update enhances text quality and customer experience in web browsing for Chinese, Japanese, and Korean languages by introducing the Noto font family. This provides modern, comprehensive font support for these languages.
それに加えて、すでにリリースされている Chrome 128 以降では、Windows デバイスに Noto Sans JP や Noto Serif JP がインストールされている場合は、デフォルトでメイリオではなく Noto フォントが利用されるようになっている。Edge も同様。
ということは、この Windows 11 Release Preview の内容が製品版チャンネルに入ってきたら、何も設定していない Windows + Chrome (Edge) 環境でフォントファミリー指定のないウェブページを表示したとき Noto フォントが利用されるのでは…？
と思って確認してみたところ、たしかにそうなっていた。
追加されたと思われるフォントは Noto Sans JP, Noto Serif JP ともに 7 ウェイトでバリアブル版ではない。
Windows + Chrome (Edge) 環境で Noto フォントがデフォルトになることで各環境のフォントの雰囲気の差異が少なくなったり、日本語のフォントウェイトのバリエーションが使いやすくなって基本的には嬉しいのだけれども、これにはちょっとだけ罠がある。
Android + Noto と Windwos + Noto の表示は同じではないのだ。主に文字の上下位置が。
表示確認
試しに表示確認用のコンテツを作ってみる。
差異がわかりやすいように、中の棒がつきぬける・つきぬけない「タ」と、よくフォント表示に使われる「愛」を入れたテキストにしたら謎の文章になった。
Noto フォントが入っていない場合
現行の Windows で Noto フォントの入っていない場合の表示は拡大率 150% でこんな感じ。
全部同じメイリオになる。
Noto フォントが入っている場合
Noto フォントが入っている場合の表示は拡大率 150% でこんな感じ。
ずれる！
困る！！
他の環境
Android で Noto Sans を表示した場合や、iOS でヒラギノを表示した場合でも、文字と同サイズの SVG を並べた場合、ちょっと文字のほうが上に見えるくらいで、そんなに大きな違いはない。
これは Android で表示した場合（当然メイリオが入っていないのでどちらも Noto Sans）
同じ Chrome + Noto Sans とはいえ、表示位置が全然違うので、パラグラフであれば違いがわかりにくいもののリンクやボタンの右に GO > のような形で SVG を置いていたりすると上下のズレが目立ってしまう。
加えて、SVG と横並びにしたときに上下中央になるように少し文字を下に寄せたりしていると、Windows + Noto Sans で表示したときの文字はかなり下寄りになってしまう。
解消方法
この Noto Sans がちょっと下にずれる問題はわりと前から有名で、ハーフリーディングの差異によるものらしい。
幸いにも Chrome 133 以降は CSS でハーフリーディングを取り除くことができる。
text-box: trim-both ex alphabetic で取り除いてみた結果。
フォントは違っていても表示位置は大体おなじになったので、あとは上下位置を微調整すればだいたいどの環境でも同じように表示されるようになるはず。
CSS text-box
text-box プロパティはまだ Limited availability で、Firefox が未対応、Safari が 18.2 から対応となっているが、今回の Noto フォントのずれは Windows + Chrome (Edge) の新しい環境向けの対応なので使っても大丈夫なはず。
おまけ
デフォルトフォントが変わるので、メイリオ未指定のページにビジュアルリグレッションテストをやっていると文字の差異でテストがコケそう。
text-box で表示調整するのも大変だし、お手軽に解消したいという場合は font-family に Meiryo を指定したほうが良いかもしれない。
Discussion