在Firefox中查看时，引导程序中的Web字体图标（@ font-face）不平滑

Question

我正在使用fontastic.me中的图标集，在基于引导程序的设计中使用CSS @ font-face实现。

问题在于，只要图标在引导主题中，当在Firefox中查看时，它们的外观就不平滑。在Firefox中在普通的非引导页面上查看时，它们看起来很流畅。

在Chrome中查看时，它们在引导程序的内部和外部都显得平滑。

这让我相信，需要一段代码来平滑地渲染图标，这些代码在引导程序中缺失，或者覆盖它。显然，在这里发布整个引导代码不是一个选项，所以我希望有人遇到类似的问题，并且知道解决方案。

以下是他们在Firefox中使用boostrap的看法：

他们在Firefox外部引导程序或Chrome内外引导程序中的外观：

以下是它们的包含方式：

@font-face {
  font-family: "minicons";
  src:url("fonts/minicons.eot");
  src:url("fonts/minicons.eot?#iefix") format("embedded-opentype"),
    url("fonts/minicons.ttf") format("truetype"),
    url("fonts/minicons.svg#minicons") format("svg"),
    url("fonts/minicons.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

[data-icon]:before {
  font-family: "minicons" !important;
  content: attr(data-icon);
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}