图标字体不适合像素（有时）

Question

我构建了一个适合像素的图标字体，但是当我尝试使用它时，有时适合像素，有时则不适合。

在此示例中，图标的三个实例显示不同的行为。第一个适合，第二个，第三个没有。为什么呢？

这个例子可以在这里看到： http://iac.e451.net/biblioteca-de-documentos.html

HTML

char

CSS

<div class="adjuntos">
  <a href="#">
      <span class="icon-doc-24"></span>
  </a>
  <a href="#">
      <span class="icon-doc-24"></span>
  </a>
  <a href="#">
      <span class="icon-doc-24"></span>
  </a>
</div>

Answer 1

这是因为字体平滑。尝试添加：

-webkit-font-smoothing: auto;
font-smooth: auto;

致.adjuntos span。它将解决您的问题（在Chrome和Firefox上），但会稍微改变图标的​​呈现。

Answer 2

在通过几个浏览器研究字体平滑选项（感谢Raphaël的帮助）后，我得出结论，问题出现在字体构建过程中。这不是CSS问题。

我将尝试研究这个构建过程。