Android浏览器等宽文本对齐难题破解
Fixing miss-aligned monospace text in Android browsers
我在Android浏览器中渲染ASCII图表时,发现等宽文本出现了错位。Neovim和MacOS浏览器显示正常,唯独Android设备上的方框对不齐。搜索后发现这是常见问题,ChatGPT和多个LLM都建议加载Noto Sans Mono字体,但通过Google Fonts的<link>标签引入后问题依旧。最终在mkdocs org的讨论中得知,Google Fonts提供的WOFF2版本是精简版,缺少部分符号导致回退到系统字体。下载完整的.ttf文件并自行托管后,对齐问题彻底解决。
即使加载了网络字体,浏览器仍可能为缺失的字形回退到系统等宽字体,而Android系统字体的宽度差异正是导致错位的原因。