javascript - 字体字符(字形)的全像素对齐

Question

Twitter Bootstrap 使用字体文件中的图标。如果图标显示在偏离像素的元素中(例如，通过将父级设置为百分比宽度，如 51% 并将图标向右浮动)，则图标会变得模糊。

这里是手动设置位置为40.3px来演示效果的代码:

<span class="glyphicon glyphicon-calendar" 
    style="position: absolute; left: 20px; top: 20px; font-size: 12px;"></span>
<span class="glyphicon glyphicon-calendar"
    style="position: absolute; left: 40.3px; top: 40.3px; font-size: 12px;"></span>

https://jsfiddle.net/s24howr2/

您会注意到第二个图标有点模糊。很多人甚至没有看到它，但这是一个问题。如果您以这种方式对齐图像，它将正确呈现。

是否有任何 CSS 规则可以用来强制字形(或一般字体)始终在圆形像素上对齐？

Answer 1

看来您应该尝试使用一些字体平滑功能。

-webkit-font-smoothing: [ 自动 |初始|无 |抗锯齿 |子像素抗锯齿]

此属性仅适用于 webkit 浏览器，例如 Safari 和 Chrome。请参阅http://maxvoltar.com/archive/-webkit-font-smoothing了解更多相关信息。

字体平滑:[ 自动 |从来没有|总是| | ]

这是 W3C CSS 字体模块规范的一部分。您可以在 http://www.w3.org/TR/WD-font/#font-smooth-prop 查看全部内容.