使用Font Awesome作为css伪背景会导致图标模糊

Question

我想使用FontAwesome图标作为css背景。然而，最终的结果是一个模糊的，或者更确切地说，肥胖的图标。我尝试了一些像字体平滑等但没有运气的东西。如何使css背景图标看起来像使用内联html时一样清晰？

<h5>With CSS:before background</h5>
<a href="#" class="back"></a>
<h5>With icon in DOM</h5>
<a href="#" class=""><i class="fa fa-youtube fa-white fa-2x"></i></a>

<style>
a {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  background-color: black;
  color: white;
}
a.back:before {
  content: "\f167";
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  font-size: 30px;
  line-height: 30px;
  position: absolute;
  text-align: center;
  width: 30px;

}
</style>

这是一个小提琴：http://jsfiddle.net/cyberwombat/kdta4zak/

还附上一枪。 FF，Chrome和Safari的结果相同。

Answer 1

在所有浏览器中看起来都不错。但是，通过明确地将伪元素的text-decoration设置为＆＃34; none＆＃34;而不是＆＃34;继承＆＃34;，我能够稍微改进它。你正在使用。

Answer 2

好的 - 更多玩字体平滑功能解决了所有3种浏览器的问题。

-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;

显然，这可能只是某些人的问题 - 也许是计算机上的字体设置。我在OSX 10.10.3上。