为什么我的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开发团队似乎意识到了这个问题.他们认为这是他们正在研究的一个错误.

我发现的最好的解决方案是不要做任何推荐的CSS黑客攻击(有轻微的阴影等),而是重新安排你的字体堆栈,以便.svg首先加载版本,因为Chrome还没有完全支持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’);
}

查看此文章以获取更多信息.

您可以组织加载字体顺序.你只需要通过调用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;
}

因此,通过直接在样式表中包含该调用,您可以控制订单负载.

Answer 2

这不是浏览器的问题,而是windows的问题.

检查这个https://graphicdesign.stackexchange.com/questions/265/font-face-loaded-on-windows-look-really-bad-which-font-are-you-using-that-are