css - 如何修复 Windows 上不寻常字符的 Monospacing？

Question

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

这是我网站上的一个例子：

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

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

这里还有一些测试文本：

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

更新：Windows 显示某些字符（如▥）的方式似乎存在问题。有没有办法解决这个问题？

Answer 1

查看 Chrome 中的 Computed Styles 选项卡，问题的原因是它从三种不同的字体中获取字形：

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

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

可能的解决方案

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

祝你好运

Answer 2

使用 CSS 属性letter-spacing。

// probably use a more explicit css selector than pre, but this works
pre {
  letter-spacing: 12px;
}

结果;

编辑;

我误解了，虽然它看起来更好一些字母间距，但这不是问题。只是环顾四周寻找干净的解决方案，但找不到任何东西。我可以建议的两个解决方案是；

1. 将每个字符包装在 a 中<span>并给跨度一个宽度。
2. 找到一种有效的新字体。

我会继续四处看看，看看能不能找到什么。