Html 背景中的字体颜色非常怪异

我使用的字体很棒，效果很好，但在Chrome中，图标显示一个奇怪的“边框”。在IE和Firefox中，这个问题不会出现。 同样奇怪的是，如果我有100%的缩放（正常视图也是如此），chrome中就会出现这个问题。如果我放大一点，例如110%，它的显示完全正确

描述问题的屏幕截图：

在Chrome中


在IE中，FF

一些代码：

<div class="col-lg-4 col-xl-2 col-md-4 col-sm-2 col-xs-2 no-padding text-center social-github">
  <a href="">
    <i class="fa fa-github-square fa-2x"></i>
  </a>
</div>

.social-github > a {
    color: #fff;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
    -ms-transition: all .1s linear;
    transition: all .1s linear;
}

.social-github > a:hover {
    color: #000;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
    -ms-transition: all .1s linear;
    transition: all .1s linear;
}

.social github>a{
颜色：#fff；
-webkit转换：所有.1s线性；
-moz跃迁：全部.1s线性；
-o-过渡：全部为1线性；
-ms转换：全部1秒线性；
过渡：所有。1s线性；
}
.social github>a:悬停{
颜色：#000；
-webkit转换：所有.1s线性；
-moz跃迁：全部.1s线性；
-o-过渡：全部为1线性；
-ms转换：全部1秒线性；
过渡：所有。1s线性；
}

将容器宽度设置为“自动”后，问题不再存在，请尝试使用精确的大小单位（像素..等）而不是em

编辑：

认为字体大小是通过使用class

fa

控制的，使用fa-1x也修复了它

---

在渲染某些字体时，这似乎是一个与Chrome和Windows相关的问题

解决问题的最简单方法似乎是将CSS文件中的svg src移动到WOFF前面，但在EOT之后，以在IE中保持支撑显示，但强制chrome使用svg而不是WOFF

例如，下面是font awesome的最小版本以及更改的顺序

@font-face{font-family:'FontAwesome'；src:url（'../font/FontAwesome-webfont.eot？v=4.0.3'）；src:url（'../font/FontAwesome-webfont.eot？#iefix&v=4.0.3'）格式（'embedded-opentype'）、url（'../font/FontAwesome-webfont.svg？v=4.0.3#FontAwesome-regular'）格式（'svg'）、url（'../FontAwesome-webfont.woff？v=4.0.3'）、url）（'../fonts/FONTSOWEME webfont.ttf？v=4.0.3'）格式（'truetype'）；

最好使用此代码，而不是上面的代码： 使用此小技巧，您可以检测Chrome并阻止下载WOFF字体：

@font-face{
字体系列：“FontAwesome”；
src:url（'../fonts/fontawesome webfont.eot？v=4.0.3'）；
src:url（'../fonts/fontawesome webfont.eot？#iefix&v=4.0.3'）格式（'embedded-opentype'）、url（'../fonts/fontawesome webfont.woff？v=4.0.3'）格式（'woff'）、url（'../fonts/fontawesome webfont.ttf？v=4.0.3'）格式（'truetype'）；
字体大小：正常；
字体风格：普通；
}
@媒体屏幕和（-webkit最小设备像素比：0）
{
@字体
{
字体系列：“FontAwesome”；
src:url（'../fonts/fontawesomewebfont.svg？v=4.0.3#fontawesomeregular'）格式（'svg'）；
字体大小：正常；
字体风格：普通；
}
}

你能提供一个演示吗？奇怪。在jsFiddle中，我无法重现错误@Michael，错误就在那里。嗯，奇怪。在jsFiddle中，我看不到错误。就在我正在处理的文件上。@Michael试着在z方向按1px进行翻译

-webkit transform:translateZ（1px）；

在我的项目中，我使用bootstrap，没有在任何地方设置任何宽度。将大小更改为fa-1x并没有解决这个问题，您可以在这里通过内联css将宽度设置为32px。只需在小提琴中“显示”白色图标，您就可以找到它。在我的实际项目中，我没有这样的设置border@Michael相信我，这与大小（字体大小）有关，因此最好的临时方法是使用大比例尺（较大的字体大小），然后通过容器控制实际大小。@Michael也许您可以尝试编辑css文件，并尝试精确像素，而不是使用em单位。很高兴您找到了答案。+1