Corrigindo texto monoespacial desalinhado em navegadores Android

Recentemente, tentei renderizar alguns diagramas ASCII como o abaixo dentro de uma tag <pre> em HTML. Enquanto isso parecia bom no Neovim e nos navegadores MacOS e iOS, percebi que em dispositivos Android os boxes estavam ligeiramente desalinhados.

     │
┌────▼─────┐
│  Phase 1 │
└────┬─────┘
     │
┌────▼─────┐
│  Phase 2 │
└────┬─────┘
     │
     ▼      

Original: o diagrama acima não deve estar alinhado em dispositivos Android.

     │
┌────▼─────┐
│  Phase 1 │
└────┬─────┘
     │
┌────▼─────┐
│  Phase 2 │
└────┬─────┘
     │
     ▼      

Corrigido: o diagrama acima deve estar corretamente alinhado em dispositivos Android.

Uma pesquisa no Google mostrou que este parece ser um problema comum, mas nenhuma solução estava imediatamente óbvia. O ChatGPT não conseguiu resolver o problema, mas pelo menos apontou na direção certa: mesmo com uma webfont carregada, o navegador provavelmente está recorrendo a uma fonte monoespacial do sistema para glifos que não estão disponíveis na (web)font. E por alguma razão, a fonte monoespacial do sistema em Android tem largura diferente, resultando no desalinhamento.

Várias pesquisas e vários modelos de linguagem grandes sugeriram carregar o Noto Sans Mono das Google Fonts. Essa fonte não teria glifos ausentes (pelo menos para os glifos de traçado de caixa) e, portanto, nenhuma recuperação deveria ocorrer. No entanto, após incorporar a webfont via uma simples tag <link>, o desalinhamento persistiu. Várias outras sugestões de truques CSS também não resolveram o problema. Estava prestes a desistir quando encontrei a discussão no mkdocs org que mencionou que o tamanho do arquivo da versão WOFF2 de Noto Sans Mono é significativamente menor que a versão TTF, já que muitos símbolos estão ausentes.

Saiu que a fonte servida das Google Fonts via <link> provavelmente é uma versão enxuta. Após baixar o arquivo .ttf em si e servi-lo por conta própria, o problema de alinhamento desapareceu.

Fragmento relevante de CSS para incorporar um .ttf diretamente no CSS:

@font-face {
  font-family: "Noto Sans Mono";
  src: url("/path/to/your.ttf");
}

pre {
    font-family: "Noto Sans Mono"
}