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

Question

我正在为我正在进行的元素使用 IconMoon @font-face 图标字体。

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

Answer 1

I found this works for that issue. I don't think the font-smooth solution actually works.

@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 will pick the last one in the list (woff), working or not, IE will use eot, and Chrome will pick the first one that works (svg). Woff works too in chrome, but causes aliased glyphs, so putting svg ahead of woff solves that.*

此解决方案有效，但会在 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/