12

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

 <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 中拉出字体时，字体看起来像素化了。我想知道是否有人可以解释为什么？

例子

4

2 回答 2

20

Chrome 开发团队似乎意识到了这个问题。他们认为这是他们正在处理的错误。

我发现最好的解决方案是不要做任何推荐的 CSS hack（有轻微的阴影等），而是重新排列你的字体堆栈，以便.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;
}

因此，只需将该调用直接包含在您的样式表中，您就可以控制订单加载。

于 2013-02-15T23:30:47.690 回答
13

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

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

于 2012-02-14T05:29:27.500 回答