css - 如何修复 Windows 上异常字符的等宽间距？

Question

我的屏幕上有一些带有等宽字体的 pre 输出。它在 Mac 上的 Chrome 和 Firefox 上都能正确显示。但是，在 Windows 上，它失去了等宽。

这是来自 my site 的示例:

▥▥▥▥▥▥▥▥▥▥
▥♖.......▥
▥........▥
▥........▥
▥........▥
▥........▥
▥........▥
▥........▥
▥.......☆▥
▥▥▥▥▥▥▥▥▥▥

如何修复它，使每个字符占用相同的空间，即使在 Windows 上也是如此？

下面是一些测试文本:

0123456789
..........
▥▥▥▥▥▥▥▥▥▥

更新:这似乎是 Windows 如何显示某些字符的问题，例如 ▥。有办法解决这个问题吗？

Answer 1

查看 Chrome 中的计算样式选项卡，问题的原因是它从三种不同的字体获取字形:

Courier New -- 72 Glyphs
Lucida Sans Unicode -- 36 Glyphs
Arial Unicode MS -- 2 glyphs

这些面孔中的每一个都有不同的大小。

可能的解决方案

• 用 css 边框替换边框字形
• 用来自与棋子相同区域的字形替换“空”单元格，可能是 U+3000“表意空间”:∀
• 使用类似 ul 甚至 flexbox 的东西来显示元素 - 具有能够以编程方式选择每个元素的优势!

祝你好运