如何获得流畅的谷歌字体？

Posted 2023-03-06

【中文标题】如何获得流畅的谷歌字体？

【英文标题】：How to get smooth Google fonts?

【发布时间】：2014-03-11 04:42:13

【问题描述】：

我以前使用的插件WP Google Fonts，也没有我要求的功能。

目前，我在当前使用的主题中使用具有已实现功能的 Google 字体。字体嵌入没有问题，并且显示正确。

现在有很多博客都带有用于高清显示器的可读流畅的字体，我也想要这些字体。正如在我的 WordPress 中所见，它能够显示它们，示例如下：

没有锐利的边缘，没有像素等。这就是我想要的。

我目前选择“Droid Sans”作为我文章的字体。但是这种字体出现了锐利的边缘和像素化。示例如下：

（请注意，在新标签页中打开这张图片会更清楚地显示问题。）

有什么可以让这个看起来流畅酷炫的吗？

是不是字体不对？我不受约束并尝试了其他一些字体。他们似乎都有那些锋利的边缘。如果您知道要比较的字体，请记下它。 是否有我必须添加的 CSS sn-p？ 是服务器端配置吗？

如何在我的文章页面中实现平滑的字体？

【参考方案1】：

这取决于您使用的浏览器。

我倾向于使用：

 -webkit-font-smoothing: antialiased;

或者如果您有模糊的粗体文本：

-webkit-filter: blur(0.000001px);

在 webkit 浏览器上。

---

或者，您可以添加文本阴影以使文本看起来更平滑

 html, html a 
      text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
 

我还建议您尝试不同的字体大小，因为某些自定义字体只会在某些大小下看起来不错。

除此之外，除了使用另一种字体之外，您无能为力。谷歌浏览器刚刚发布了更流畅字体的更新。查看 svg 字体可能也很有用：

Google Fonts & http://www.fontspring.com/demos/svg-vs-woff/

【讨论】：

Rofl，我刚刚使用了另一种字体，效果很好。我的字体（和其他一些字体）在 16 像素时看起来很糟糕。我现在在一个小而简单的 HTML 页面中尝试了您的代码，它可以工作。谢谢！

【参考方案2】：

我使用 SVG 等谷歌字体解决了这个问题：

<style type="text/css">
    @import url('https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic');
 </style>