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

Question

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

现在，我正在使用Google字体，并在当前使用的主题中实现了一个特定的功能。这些字体嵌入无障碍，并且显示正确。

目前，有很多博客都使用高清显示器上易读的平滑字体，我也想使用这些字体。正如在我的WordPress中所看到的，它能够展示它们，如下所示：

没有尖锐的边缘、没有像素等。这就是我想要的效果。

我目前选择"Droid Sans"作为我的文章字体。但是这种字体出现了尖锐的边缘和像素化的问题，如下所示：

（请注意，在新标签页中打开此图片会更加清晰地显示该问题。）

• 是选择了错误的字体吗？我并不局限于这个字体，已经尝试了其他字体，它们似乎都有这些尖锐的边缘。如果您知道可以进行比较的字体，请注明。
• 是否需要添加CSS代码片段？
• 是服务器端的配置问题吗？

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

- Trollwut

Answer 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);
 }

我建议您尝试不同的字体大小，因为一些自定义字体只在特定大小下才会显得好看。

除此之外，除了使用其他字体外，您别无选择。Google Chrome刚刚发布了更新以获得更平滑的字体。另外，查看SVG字体也可能会有所帮助：

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

- Jack

---

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

Answer 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>

- judian