Question

Web浏览器用另一个字符替换字体中的缺失字符（通常是箭头，图形符号和我的特定用例中的unicode字符＆＃34;»＃34;（U + 226B））字体。如果您使用的是等宽字体，则替换字符（大部分时间）来自比例字体，并且会破坏严格的网格图案，这在使用等宽字体时需要很多情况。

例如，在我的浏览器中，这搞砸了：

＆＃13;

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

＆＃13;

＆＃34;»＆＃34;之后的管道符号不与其他人对齐（使用我机器上安装的字体）。

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

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

Answer 1

这是最好的部分答案，但也许对一些人有帮助。在CSS字体堆栈中，您可以包含具有良好unicode覆盖率的单倍间距字体。例如，OS X中的Courier New包含超过1200个字形，我猜这些字形包括大多数有用的unicode字符。如果您在字体堆栈中的主要字体后面列出它，那么对于主要字体中没有的字符，您至少应该具有一致的宽度。

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

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

恐怕不是一个简单的解决方案。

P.S。您可能想要编辑标题。我认为你的意思是“单声道间隔”，因为“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元素缩放图像。或者你可以用恰当的尺寸创建图像，但是如果稍后更改字体（这样宽度也可能会改变），这将不太灵活。

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

3 个答案: