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

前端之家收集整理的这篇文章主要介绍了javascript – 当用作等宽字体时,使非等宽字体的替换字符以正确的宽度显示前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
Web浏览器用另一种字体中的字符替换字体中的缺失字符(通常是箭头,图形符号和我的特定用例中的unicode字符“»”(U 226B)).如果您使用的是等宽字体,则替换字符(大部分时间)来自比例字体,并且会破坏严格的网格图案,在使用等宽字体时,在很多情况下都会这样.

例如,在我的浏览器中,这搞砸了:

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

“»”之后的管道符号与其他符号不对齐(与我的机器上安装的字体对齐).

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

如有必要,JavaScript解决方案也可以.

解决方法

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

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

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

在任何情况下我都不是一个简单的解决方案.

附:您可能想要编辑标题.我认为你的意思是“单声道”,因为“monotype”是一种类型的代工厂.

猜你在找的JavaScript相关文章