Roboto来自materializecss奇怪的字体渲染在Chrome,Firefox,OK和IE？

Question

我正在使用带有Roboto 2.0字体的Materialise CSS.字体在Chrome 43和Firefox 37中看起来很糟糕.令人惊讶的是它看起来非常好(完全结果):

其他字体(如Lato和Open Sans)以及我的工作计算机也是如此(相同的视频卡和操作系统,如果有关系).我的设置是否有问题(Windows 7 x64 + NVIDIA GTX 780 1920x1080显示屏)？

Answer 1

不,没有错.这里有一些可能影响事物呈现方式的事情.

Web字体的状态@font-face是浏览器对各种文件类型的不同支持,并且这些文件类型可能在浏览器内呈现不同.

通常,您会看到以下类型:

• .eot
• .woff
• .woff2
• .SVG
• .TTF

浏览器通常不支持这些类型中的一种,它们将支持少数几种,因此它们在@font-face规则中列出的顺序决定了使用哪种文件类型.除此之外,这些文件对于相同的字体具有不同的大小,因此必须予以考虑.

Chrome特别是渲染.woff看起来很糟糕,如果你直接链接到fonts.googleapis.com css使用网络字体,你可以自行决定使用/加载哪种字体,服务似乎更喜欢.woff /.woff2是出于文件大小的原因.

您可以在CSS Tricks,MDN和其他博客等地方详细阅读有关此内容的更多信息.使用自定义网络字体仍然不是应该的那么容易,但像TypeKit这样的服务可以帮助解决一些繁重的问题.

现在所有这些只是处理不同的字体文件类型.仍然有大量的CSS属性会影响特定字体在浏览器中的显示方式,包括特定于供应商和一般用途.

最后,我们不能将操作系统排除在外,因为操作系统有自己的字体渲染引擎.这是一篇来自TypeKit的关于其中一些差异的好文章.

TL; DR - 不,它不太可能是你的显卡(虽然它显然可以参与其中).它很可能是浏览器中使用的字体文件类型.似乎选择.woff2然后回退到.eot(IE)和.ttf将产生比.woff或.svg更好的质量.

希望有所帮助!

Answer 2

您是否尝试过指定字体平滑/渲染？
它通常会对我的经历产生很大的影响.

body {
  /* Better Font Rendering */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Answer 3

这是字体操作系统渲染问题.简单的解决方案是使用谷歌字体,如:

<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> 

或者复杂的解决方案,但往往是最好的解决方案是对每个浏览器使用@ font-face与每种类型的文件格式.

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}