Chrome 中的字体呈现问题 - Google Web Fonts答案

【问题标题】：Font Rendering Issue in Chrome - Google Web FontsChrome 中的字体呈现问题 - Google Web Fonts
【发布时间】：2015-04-02 05:39:29
【问题描述】：

我在 Chrome 上遇到了一个奇怪的 Google 字体渲染问题。这就是我的意思：

IE 10：

FireFox 36.0.4：

铬 41.0.2272.118 米：

这是特写（Chrome）：

我使用的字体名为“Playfair”，可在 Google Fonts 上免费获得。这是我的 CSS / SCSS：

@import url("http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic");

    .foo{
      font-family:$playfair;
      font-style: italic;
      font-weight:normal;
      color: $light_grey;          
      font-size:12px;
    }

【问题讨论】：

标签： html css google-chrome fonts rendering

【解决方案1】：

你试过字体平滑吗？

-webkit-font-smoothing: antialiased;

另外，尝试改变：

font-weight: normal;

到：

font-weight: 400;

【讨论】：

是的，尝试了所有这些。显然，很多人都遇到了这个问题，我发现的唯一解决方法是使用@font-face，并确保 Chrome 和 Opera 先渲染svg。更多细节在这里：bit.ly/1yFVeXD

【解决方案2】：

原来是字体提示设置。我发现几个 webfont 生成器通过让用户选择不同的提示设置来解决这个问题。如果您有同样的问题，试试这个https://fontie.flowyapps.com/home

【讨论】：