css - Chrome 不渲染@font-face ttf/woff 平滑

Question

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

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

Answer 1

我发现这适用于该问题。我不认为字体平滑的解决方案实际上有效。

@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 2

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

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

Answer 3

将 svg 字体的 url 放在所有其他字体之前，Chrome 将加载 SVG，您将获得漂亮的渲染效果，尤其是对于浅色字体。

Answer 4

试试这个字体的小旋转，希望对你有帮助。

例子：

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