css - 来自 materializecss 的 Roboto 在 Chrome、Firefox、IE 中呈现奇怪的字体？

Question

我使用的是带有 Roboto 2.0 字体的 Materialize CSS。字体在 Chrome 43 和 Firefox 37 中看起来很糟糕。令人惊讶的是，在 IE 中它看起来非常好(full resulution):

Lato 和 Open Sans 等其他字体以及我的工作计算机(如果重要的话，相同的视频卡和操作系统)也会发生同样的情况。我的设置有问题吗(Windows 7 x64 + NVIDIA GTX 780 1920x1080 显示器)？

Answer 1

不，没有错。这里有一些因素可能会影响事物的呈现方式。

Web 字体和 @font-face 的状态是浏览器对各种文件类型的支持各不相同，这些文件类型在浏览器中的呈现方式可能不同。

通常，您会看到这些类型:

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

浏览器通常不只支持其中一种类型，它们还会支持几种类型，因此它们在 @font-face 规则中列出的顺序决定了哪种文件类型用过的。此外，这些文件对于相同的字体具有不同的大小，因此必须考虑这一点。

尤其是 Chrome renders .woff poorly看来，如果您直接链接到 fonts.googleapis.com css要使用网络字体，Google 会自行决定使用/加载哪种字体，并且出于文件大小的原因，该服务似乎更喜欢 .woff/.woff2。

您可以在类似 CSS Tricks 的地方详细阅读更多相关信息, MDN , 和其他 Blogs .使用自定义网络字体仍然不像它应该的那样容易，但像 TypeKit 这样的服务帮助完成一些繁重的工作。

现在所有这些只是处理字体的不同文件类型。仍然有很多 CSS 属性可以影响特定字体在浏览器中的显示方式，包括 vendor specific和 general use .

最后，我们不能将操作系统排除在外，因为操作系统有自己的字体渲染引擎。这是一个 good article from TypeKit about some of those differences .

TL;DR - 不，这不太可能是您的显卡(尽管它显然可以发挥作用)。这很可能是浏览器中使用的字体文件类型。似乎选择 .woff2 然后回退到 .eot (IE) 和 .ttf 会产生比 .woff 或 .svg 更好的质量。

希望对您有所帮助!