CSS 为什么我的 Google 网络字体像素化了？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9272073/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why are my Google Web Fonts pixelated?
提问by jamesamuir
I am trying to use google fonts in a simple website. The tag that I am using is
我想在一个简单的网站中使用谷歌字体。我正在使用的标签是
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' >
The css is
css是
body {
padding: 0;
text-align: center;
line-height: 180%;
background: #1a2426;
color: #f7f7f7;
font-family: 'Lobster', serif;
}
The problem is that the font looks pixelated when I pull it up in Chrome. I was wondering if anyone could explain why?
问题是当我在 Chrome 中拉起字体时，字体看起来像素化了。我想知道是否有人可以解释为什么？
Example
例子
回答by Gray Ayer
It appears that the Chrome Development team is awareof this issue. It is regarded by them as a bug that they are working on.
Chrome 开发团队似乎已经意识到这个问题。他们认为这是他们正在处理的错误。
The best solution I've found is not to do any of the recommended CSS hacks (having a slight drop shadow, etc) but to rearrange your font stack so that the .svgversion loads first since Chrome doesn't fully support TrueType fonts yet.
我发现的最佳解决方案不是执行任何推荐的 CSS 技巧（具有轻微的阴影等），而是重新排列您的字体堆栈，以便.svg首先加载版本，因为 Chrome 尚不完全支持 TrueType 字体。
For example:
例如：
@font-face {
font-family: ‘MyWebFont';
src: url(‘webfont.eot');
src: url(‘webfont.eot?#iefix') format(‘embedded-opentype'),
url(‘webfont.svg#svgFontName') format(‘svg'),
url(‘webfont.woff') format(‘woff'),
url(‘webfont.ttf') format(‘truetype');
}
Check out this articlefor further info.
查看这篇文章了解更多信息。
You can organize the load font order. you just have to understand that by calling http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' > you're bringing in an external stylesheet that says:
您可以组织加载字体顺序。您只需要通过调用 http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' > 来了解，您将引入一个外部样式表，内容为：
/* latin */
@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: 400;
src: local('Lobster'), local('Lobster-Regular'), url(http://fonts.gstatic.com/s/lobster/v11/G6-OYdAAwU5fSlE7MlBvhVKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
so by just including that call directly in your stylesheets, you have control over the order load.
因此，只需将该调用直接包含在您的样式表中，您就可以控制订单加载。
回答by sandeep
It's not a problem of browser it's problem of windows.
不是浏览器的问题，是windows的问题。
