SVG中monospace字体出现可变宽度字形导致字符无法对齐问题

• macOS 下 Chrome、Safari 对 monospace 通用字体族的默认 fallback 规则特殊：你用到的地牢场景特殊字形（盒型绘图符、自定义符号）不在 Courier 字体的内置字符范围内，浏览器会自动调用其他非等宽字体渲染这部分字符，直接导致同列字符宽度不一致，无法对齐。
• 现有样式缺少强制等宽渲染的辅助配置，浏览器默认开启的字体连字、字间距动态优化都会打乱等宽排版逻辑。

按以下优先级调整样式即可解决对齐问题：

1. 明确指定对特殊符号等宽支持更好的字体栈，优先使用 macOS 原生自带的 Menlo 字体（对绘图类特殊字符的等宽适配做过专门优化）
2. 关闭字体连字，开启精确渲染配置，避免浏览器自动调整字符间距
3. 固定行高与字体大小一致，保证垂直方向的行间距统一

修复后的完整样式示例：

<style>
.base {
    fill: green;
    /* 优先用对特殊符号支持好的等宽字体，最后兜底通用monospace */
    font-family: Menlo, Monaco, 'Courier New', Courier, monospace;
    font-size: 14px;
    /* 固定行高等于字体大小，保证垂直对齐 */
    line-height: 14px;
    /* 关闭连字，避免多个字符被合并渲染为单个连字导致宽度异常 */
    font-variant-ligatures: none;
    /* 强制浏览器精确计算字符宽度，不做可读性优化调整 */
    text-rendering: geometricPrecision;
    /* 保证空格按等宽渲染 */
    white-space: pre;
    letter-spacing: 0;
}
</style>

如果以上配置依然存在个别字符对齐问题，可以检查你的SVG中<text>元素的x属性是否每一行都设置为相同的固定值，避免因为文本锚点偏移导致的对齐异常。

内容的提问来源于stack exchange，提问作者steddyman