来自materializecss的Roboto在Chrome、Firefox中呈现怪异字体，可以使用IE吗？

我正在使用Roboto 2.0字体附带的物化CSS。Chrome43和Firefox37的字体看起来很糟糕。令人惊讶的是，IE看起来非常好（）：

---

同样的情况也发生在其他字体上，比如Lato和Open Sans，以及我的工作电脑上（如果需要的话，同样的视频卡和操作系统）。我的设置（Windows 7 x64+NVIDIA GTX 780 1920 x1080显示器）有问题吗？

没有，没有问题。这里有一些因素可能会影响渲染效果

Web字体和

@font-face

的状态是浏览器对各种文件类型有不同的支持，并且这些文件类型在浏览器中的呈现方式可能不同

通常，您会看到以下类型：

• .eot
• 沃夫先生
• woff2先生
• .svg
• .ttf

浏览器通常不支持这些类型中的一种，它们会支持一些，因此它们在

@font-face

规则中列出的顺序决定了使用哪种文件类型。此外，对于相同的字体，这些文件具有不同的大小，因此必须加以考虑

尤其是Chrome，如果您直接链接到使用web字体，您可以由Google自行决定使用/加载哪种字体，并且出于文件大小的原因，该服务似乎更喜欢.woff/.woff2

你可以在诸如、和其他地方详细阅读更多关于这方面的信息。使用自定义web字体仍然不像应该的那么容易，但是像帮助这样的服务可以减轻一些负担

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

最后，我们不能将操作系统排除在外，因为操作系统有自己的字体渲染引擎。这是一个例子

TL；DR-不，它不太可能是您的图形卡（尽管它显然可以在其中发挥作用）。它很可能是浏览器中使用的字体文件类型。似乎选择.woff2然后返回到.eot（IE）和.ttf将产生比.woff或.svg更好的质量

---

希望有帮助

您是否尝试过指定字体平滑/渲染？
这通常会使我的经验大不相同

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

---

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

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

---

如果有人无意中发现了这一点，这是与Materialize捆绑的Roboto版本的问题。此处已发布解决方案

此解决方案无法修复。。它对所选字体的默认行为。。我还为我的一个项目选择了“Sintony”字体，它看起来比你的更可怕，仅在Chrome中。我什么都试过了，但都没用。最后我使用了Helvetica字体。但是，您可以尝试使用SVG字体，我认为它们在所有浏览器中都会呈现得非常好。不要忘记添加本地src，即

src:local（'MyWebFont'），

，以防机器上已经存在该字体。以Google Web字体中的开放SAN为例：这是一个Google解释。然而，在我的具体案例中，您说我应该选择woff2（考虑到列表/优先级）。但是你链接的CSS是woff2，所以我无法解释原因。你没有链接到你的CSS，所以我没有参考框架（除了屏幕截图）来说明你在做什么，所以我不能给你一个更直接的答案。当你说我链接到的CSS是清单woff2时，你是指fonts.googleapis.com链接吗？当您从googleapis链接到字体时，实际提供的CSS会根据您在其中查看的浏览器而变化，因此它可能并不总是woff2。如果你能在一个例子（Codepen/Fiddle）中给我一个链接到你的CSS，我可以更好地告诉你为什么你看到了你看到的东西。事实上，我刚刚注意到了一些东西。在上面的屏幕截图中，Chrome是最上面的浏览器，IE是最下面的浏览器。在我看来，无论是小屏幕截图还是大屏幕截图，Chrome的字体都比IE的要好得多。你的意思是说它在IE11和Firefox37中看起来很可怕吗？在这种情况下，我将尝试按以下顺序使用字体：.eot->.woff2->.ttf->.woff->.svg

@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 */
}