当用作等宽字体时，使来自非等宽字体的替换字符以正确的宽度显示

Question

Web 浏览器用另一种字体中的字符替换字体中缺失的字符（通常是箭头、图形符号，在我的特定用例中是 unicode 字符“≫”（U+226B））。如果您使用的是等宽字体，则替换字符（大部分时间）来自比例字体，并且会弄乱在使用等宽字体时在许多情况下需要的严格网格图案。

例如，在我的浏览器中，这是一团糟：

<pre>
012345
 1 |
 a |
 Ö |
 % |
 ≫ |
 2 |
 b |
 X |
 & |
</pre>

“≫”之后的管道符号与其他符号不对齐（与我机器上安装的字体）。

有没有办法确保浏览器将替换字符缩放到正确的宽度？

如有必要，JavaScript 解决方案也可以。

Answer 1

这充其量只是部分答案，但也许对某些人会有所帮助。在您的 CSS 字体堆栈中，您可以包含具有良好 unicode 覆盖率的等宽字体。例如，OS X 中的 Courier New 包含超过 1200 个字形，我猜这些字形包括大多数有用的 unicode 字符。如果您将其列在字体堆栈中的主要字体之后，那么您的主要字体中缺少的那些字符至少具有一致的宽度。

当然，如果主字体的宽度与备用字体的宽度不同，这并不能真正解决问题。如果幸运的话，您也许能够找到具有相同宽度且具有足够 unicode 覆盖率的备用字体，在这种情况下您可以按原样使用它。否则，我认为您没有简单的解决方案。在这种情况下，我可以想到几个替代方案。

1. 如果许可证允许，您可以修改备用字体的宽度，使其与您的主要字体相匹配。
2. 如果您事先知道要显示哪些 unicode 字符，可以将它们包装在 <span> 标记中并调整样式以匹配主要字体的宽度。

恐怕无论如何都不是一个简单的解决方案。

附：您可能想要编辑您的标题。我认为您的意思是“mono-spaced”，因为“monotype”是一种类型铸造厂。

Answer 2

你愿意做多铁杆？
这是一个将文本的每个字母包装在给定宽度的跨度中的代码：

var container = document.getElementsByClassName('mymonotext');
if (!container.length) {
    throw new Error('.mymonotext is not found');
}

container = container[0];
container.normalize(); //Merge all the adjacent text nodes inside a container (see https://developer.mozilla.org/en-US/docs/Web/API/Node.normalize)

var currentNode = container.firstChild;
for (var i = 0, len = currentNode.textContent.length; i < len - 1; i++) {  
    var range = new Range(); //Create a range

    //Insert a first char into a range
    range.setStart(currentNode, 0); 
    range.setEnd(currentNode, 1);

    var wrapper = document.createElement('span');
    wrapper.className = 'letter';

    //Wrap the range with a span tag
    wrapper.appendChild(range.extractContents())
    range.insertNode(wrapper);

    //Detach the previous range and shift current node
    range.detach();
    currentNode = currentNode.nextSibling.nextSibling;
}

包装标签的样式：

.letter {
    width: .5rem;
    display: inline-block;
    overflow: hidden;
}

在 jsfiddle 上也是一样：http://jsfiddle.net/enwyoy4y/
（使用后果自负，yada-yada，不支持IE8等）。

Answer 3

等宽字体中字符的前进宽度对于特定字体是固定的，但对于不同的等宽字体可能会有所不同。如果您限制自己使用特定的等宽字体（在网页上，这仅在使用 @font-face 时才有意义，因为没有在所有计算机上都可用的等宽字体），您可以找出它的提前宽度（例如使用字体检查器程序，或进行一些测试），然后将元素缩放到该宽度。

然而，你不能让字体大小取决于元素的宽度，除非有一些 JavaScript 编程，所以如果你的问题只是一个字符，使用图像是最简单的。以某种大字体书写字符，截取屏幕截图，然后使用您仅设置宽度的img 元素缩放图像。或者，您可以创建尺寸恰到好处的图像，但如果您稍后更改字体（因此宽度也可能发生变化），这将不太灵活。