Question

我正在使用IconMoon @ font-face图标字体来处理我正在进行的项目。

当仅包含.svg和/或.eot字体时，或者在使用其他浏览器（如IE9）浏览时，字体很好且流畅地呈现。但是当使用Chrome浏览网站并包含.ttf和/或.woff格式时，图标会变得非常不连贯并且根本没有抗锯齿。有没有办法告诉Chrome加载.eot或.svg而不是.ttf或.woff？

Answer 1

也许这个css属性解决了你的问题：

yourSelector {
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
}

Answer 2

我发现这适用于该问题。我不认为字体平滑的解决方案确实有效。
@font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
   src: url('fonts/montserrat-regular-webfont.eot'); /* IE9 Compat Modes */
   src: url('fonts/montserrat-regular-webfont.eot?iefix') format('eot'), 
       url('fonts/montserrat-regular-webfont.ttf')  format('truetype'), 
       url('fonts/montserrat-regular-webfont.svg#montserratregular') format('svg'),
       url('fonts/montserrat-regular-webfont.woff') format('woff'); 
}
Firefox将选择列表中的最后一个（woff），无论是否工作，IE将使用eot，和 Chrome会选择第一个有效的（svg）。 Woff在chrome中也起作用，但是原因别名字形，所以把svg放在woff之前解决了。*

此解决方案有效，但在Safari中引起额外请求，您可以将svg保留在woff之下，就像您最初一样，并添加：

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'OpenSansLightItalic';
    src: url('fonts/montserrat-regular-webfont.svg#montserratregular')  format('svg');
  }
}

在此处阅读：http://hollisterdesign.wordpress.com/2014/04/29/note-to-self-always-use-this-fix/

Answer 3

将svg字体的网址放在所有其他网址之前，Chrome会加载SVG，你会得到一个很好的渲染，特别是对于浅色字体。

Answer 4

为您的字体尝试这个小旋转，希望它能帮助您。

示例：

p{
  transform: rotate(-0.0000000001deg);
}

Chrome无法呈现@ font-face ttf / woff顺畅

4 个答案: