我的屏幕上有一些带有等宽字体的 pre 输出。它在 Mac 上的 Chrome 和 Firefox 上都能正确显示。但是，在 Windows 上，它失去了等宽。
这是来自 my site 的示例:
▥▥▥▥▥▥▥▥▥▥
▥♖.......▥
▥........▥
▥........▥
▥........▥
▥........▥
▥........▥
▥........▥
▥.......☆▥
▥▥▥▥▥▥▥▥▥▥
如何修复它，使每个字符占用相同的空间，即使在 Windows 上也是如此？
下面是一些测试文本:
0123456789
..........
▥▥▥▥▥▥▥▥▥▥
更新: 这似乎是 Windows 如何显示某些字符的问题，例如 ▥。有办法解决这个问题吗？
最佳答案
查看 Chrome 中的计算样式选项卡，问题的原因是它从三种不同的字体获取字形:
Courier New -- 72 Glyphs
Lucida Sans Unicode -- 36 Glyphs
Arial Unicode MS -- 2 glyphs
这些面孔中的每一个都有不同的大小。
可能的解决方案
- 用 css 边框替换边框字形
- 用来自与棋子相同区域的字形替换“空”单元格，可能是 U+3000“表意空间”:
∀ - 使用类似
ul甚至 flexbox 的东西来显示元素 - 具有能够以编程方式选择每个元素的优势!
祝你好运
关于css - 如何修复 Windows 上异常字符的等宽间距？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23665982/