为什么我的Google网络字体会出现像素化？

Question

我想在一个简单的网站上使用谷歌字体。我正在使用的标签是

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

css是

body {

  padding: 0;
  text-align: center;

  line-height: 180%;

  background: #1a2426;
  color: #f7f7f7;

  font-family: 'Lobster', serif;

}

问题是当我在Chrome中提取字体时，字体看起来像素化了。我想知道是否有人可以解释原因？

实施例

Answer 1

此问题似乎是Chrome开发团队is aware。他们认为这是他们正在研究的一个错误。

我发现的最佳解决方案是不要做任何推荐的CSS黑客攻击（有轻微的阴影等），而是重新安排你的字体堆栈，以便.svg版本首先加载，因为Chrome没有t还完全支持TrueType字体。

例如：

@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’);
}

查看this article了解更多信息。

您可以整理加载字体顺序。你只需要通过调用http://fonts.googleapis.com/css?family=Lobster'rel ='stylesheet'type ='text / css'＆gt;来理解它。你带来了一个外部样式表，上面写着：

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

因此，只需在样式表中直接包含该调用，即可控制订单负载。

Answer 2

浏览器的问题不是windows的问题。

选中此https://graphicdesign.stackexchange.com/questions/265/font-face-loaded-on-windows-look-really-bad-which-font-are-you-using-that-are