Androidブラウザでのモノスペーステキストのずれの修正

最近、HTMLの<pre>タグ内でASCII図のようなものをレンダリングしようとしました。Neovim、MacOS、iOSのブラウザでは問題なく表示されましたが、Androidではボックスがわずかにずれていることに気づきました。 │ ┌────▼─────┐ │ Phase 1 │ └────┬─────┘ │ ┌────▼─────┐ │ Phase 2 │ └────┬─────┘ │ ▼ 元の状態: 上記の図はAndroidデバイスでは揃わないはずです │ ┌────▼─────┐ │ Phase 1 │ └────┬─────┘ │ ┌────▼─────┐ │ Phase 2 │ └────┬─────┘ │ ▼ 修正後: 上記の図はAndroidデバイスで正しく揃うはずです Google検索をすると、これは一般的な問題のようでしたが、すぐに解決策は見つかりませんでした。ChatGPTも問題を解決できませんでしたが、少なくとも正しい方向性を示してくれました。ウェブフォントがロードされていても、ブラウザは利用できないグリフについて、ウェブフォントではなくシステムモノスペースフォントにフォールバックする可能性が高いとのことです。そして、何らかの理由でAndroidのモノスペースシステムフォントは幅が異なり、その結果ずれが生じます。 いくつかのGoogle検索や複数の異なるLLMは、Google FontsからNoto Sans Monoをロードすることを提案しました。このフォントには（少なくともボックス描画グリフについては）欠落しているグリフがないため、フォールバックは発生しないはずです。しかし、単純な<link>タグを介してウェブフォントを埋め込んだ後も、ずれは解消されませんでした。他の様々なCSSハックも問題を解決しませんでした。 諦めかけましたが、mkdocsの議論で、Noto Sans MonoのWOFF2バージョンのファイルサイズが、多くの記号が欠落しているためTTFバージョンよりも著しく小さいという言及を見つけました。Google Fontsから<link>経由で提供されるフォントは、おそらくトリミングされたバージョンである可能性が高いことが判明しました。実際に.ttfファイルをダウンロードして自分でホストしたところ、ずれの問題は解消されました。 .ttfをCSSに直接埋め込むための関連CSSスニペット: @font-face { font-family: "Noto Sans Mono"; src: url("/path/to/your.ttf"); } pre { font-family: "Noto Sans Mono" }