如何修复 safari 和 chrome 上的谷歌字体像素化问题答案

【问题标题】：How to fix google font pixelation issues on safari and chrome如何修复 safari 和 chrome 上的谷歌字体像素化问题
【发布时间】：2014-05-26 14:10:35
【问题描述】：

我在我的网站上使用了名为 http://fonts.googleapis.com/css?family=Merriweather:400,700,700italic 的 Google 字体，它在 Firefox 和 IE 上看起来不错，但在 safari 和 Google chrome 上却不行......请查看图片......

我希望它可以在每个浏览器上运行而没有任何像素化问题

请求您的最佳建议............

谢谢

【问题讨论】：

字体渲染的不同，尝试不同的字体，也尝试不同的font-size，以前有css现在没有了stackoverflow.com/questions/18786829/…

【解决方案1】：

试试这个：

{
  -webkit-text-stroke: 0.6px;
}

【讨论】：

【解决方案2】：

您无法控制像 Chrome 这样的浏览器如何呈现字体。您只需控制以最佳字体大小选择最佳字体。（某些字体仅在某些字体大小下看起来不错 - 您使用的字体从 50px 开始看起来不错。编辑：啊，这是不同的issue）

如果您/您的客户非常具体，您甚至可以从一些自定义渲染中获得帮助，例如

它使用 canvas/flash 来渲染字体。广泛使用它可能会导致性能问题或速度缓慢。

以前有个字体平滑，不过估计已经不支持了，你可以试试-webkit-font-smoothing property has no effect in Chrome

【讨论】：

【解决方案3】：

您可以使用平滑字体

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

【讨论】：