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

Question

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

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

Answer 1

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!

Answer 2

您是否尝试过指定字体平滑/渲染？
这通常会给我的经历带来很大的不同。

void myFunc(int i)
{
    myFunc((myEnum)i);
}

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

Answer 4

如果有人遇到这种情况，那么与Materialize捆绑在一起的Roboto版本就会出现问题。此处已发布解决方案https://stackoverflow.com/a/36803177/906360