Roboto从materializecss奇怪的字体渲染在Chrome，Firefox，确定与IE？ [英] Roboto from materializecss weird font rendering in Chrome, Firefox, OK with IE?

问题描述

我使用Materialize CSS与Roboto 2.0字体。字体看起来可怕的Chrome 43和Firefox 37.令人惊讶的是，它看起来很不错（它似乎和如果你直接链接到 fonts.googleapis.com css 使用您自己决定使用的网络字体，使用/加载哪种字体，并且该服务似乎更喜欢.woff / .woff2由于文件大小的原因。

您可以在以下地方阅读更多详情： CSS技巧， MDN 和其他博客。使用自定义网络字体仍然不是那么容易，但像 TypeKit 这样的服务帮助解决了一些繁重的工作。

现在这只是处理不同的文件类型的字体。仍然有大量的CSS属性可以影响特定字体在浏览器中的显示方式，供应商特定和一般使用。

最后，我们不能采取操作系统的方程，因为操作系统有自己的字体渲染引擎。以下是来自TypeKit的关于某些差异的好文章。

TL; DR - 不，您的显卡不大可能（尽管这显然可以在其中发挥作用）。它很可能是在浏览器中使用的字体文件类型。看起来选择.woff2然后回到.eot（IE），.ttf会产生比.woff或.svg更好的质量。

希望有帮助！ p>

I'm using Materialize CSS coming with the Roboto 2.0 font. Font looks horrible in Chrome 43 and Firefox 37. Surprisingly with IE it looks very good (full resulution):

Same happens with other fonts like Lato and Open Sans and also on my work computer (same videocard and OS, if matters). Is there something wrong in my setup (Windows 7 x64 + NVIDIA GTX 780 1920x1080 display)?

解决方案

Nope, nothing wrong. There are a few things at play here that could impact how things are rendered.

The state of Web Fonts and @font-face is that browsers have varying support of various file types and those file types may render differently inside of the browser.

Commonly, you'll see these types:

• .eot
• .woff
• .woff2
• .svg
• .ttf

Browsers don't typically just support one of these types, they'll support a few and so the order in which they're listed in the @font-face rule determines which file type is used. To add to that, these files have varying sizes for the same fonts so that has to be considered.

Chrome in particular renders .woff poorly it seems and if you're linking directly to fonts.googleapis.com css to use web fonts you're at Google's discretion as far as which font is used/loaded and the service seems to prefer .woff/.woff2 for file size reasons.

You can read a lot more about this in detail at places like CSS Tricks, MDN, and other Blogs. Using custom web fonts still isn't as easy as it should be but services like TypeKit help with some of the heavy lifting.

Now all that is just dealing with varying file types for fonts. There are still plenty of CSS properties that can impact how a particular font displays in a browser, both vendor specific and general use.

Finally, we can't take the Operating System out of the equation, as operating systems have their own Font rendering engines. Here's a good article from TypeKit about some of those differences.

TL;DR - No, it's not likely your Graphics Card (although that can obviously play a part in it). It's most likely the font file type being used in the browser. Seems that opting for .woff2 then falling back to .eot (IE) and .ttf will produce better quality than .woff or .svg.

Hope that helps!

这篇关于Roboto从materializecss奇怪的字体渲染在Chrome，Firefox，确定与IE？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！