logo标签列表

Chrome无法平滑渲染@font-face的ttf/woff字体。

cssiconsfont-facesmoothing
6
我正在一个项目中使用IconMoon的@font-face图标字体。当只包含.svg和/或.eot字体时，或者在其他浏览器（如IE9）中浏览时，字体渲染得很好且平滑。但是，当用Chrome浏览网站并包含.ttf和/或.woff格式时，图标变得非常粗糙且没有反锯齿。有办法告诉Chrome加载.eot或.svg而不是.ttf或.woff吗？
4个回答
2

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/

SVG字体在Chrome浏览器中要么无法正常工作，要么已被弃用（取决于操作系统）。请参考此链接了解更多信息：http://blog.chromium.org/2014/08/chrome-38-beta-new-primitives-for-next.html - Curtis Blackwell
1

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

yourSelector {
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
}
顺便提一下，唯一支持“eot”格式的浏览器是IE。Chrome也支持“svg”格式，并且您可以在@font-face样式规则中包含指向“svg”文件的链接，但如果还提供了“ttf”或“otf”链接，则大多数浏览器会优先使用它们。 - neepo
0
将SVG字体的URL放在所有其他内容之前，Chrome会加载SVG，您会获得漂亮的渲染效果，尤其是对于浅色字体。
SVG字体在Chrome浏览器中要么无法工作，要么已被弃用（取决于操作系统）。http://blog.chromium.org/2014/08/chrome-38-beta-new-primitives-for-next.html - Curtis Blackwell
-1

尝试一下这个小的字体旋转，希望能对你有所帮助。

示例：

p{
  transform: rotate(-0.0000000001deg);
}
哈哈，那有点奏效。不幸的是，最小的度数是0.1度才能生效，这让页面看起来很奇怪。 - user702397
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接