css - 如何获得流畅的谷歌字体?

标签 css wordpress google-font-api

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

现在我使用的是谷歌字体,在当前使用的主题中实现了一个功能。字体嵌入没有问题,并且显示正确。

现在有很多博客都带有适用于高清显示器的清晰易读的流畅字体,我也想要这些字体。正如在我的 WordPress 中看到的那样,它能够显示它们,示例如下:

enter image description here

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

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

enter image description here (请注意,在新选项卡中打开此图片可以更清楚地显示问题。)

有什么东西能让它看起来光滑又酷吗?

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

如何在我的文章页面中实现流畅的字体?

最佳答案

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

我倾向于使用:

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

关于css - 如何获得流畅的谷歌字体?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21735005/

相关文章:

javascript - Grunt CSS 缩小和谷歌字体

css - 为什么我的嵌入字体呈现不正确?

html - 列出不需要的跨越区域的元素?

html - div 类的最后一个 child

html - 如何使用 css 在 <p> 标记中设置波斯语和英语文本的方向?

javascript - 如何在移动浏览器上禁用 Google 字体?

html - Font Awesome 图标不能用作 CSS 中的内容

javascript - 键盘快捷键文档的拟物化键

css - 保持溢出 :hidden behavior after will-change:transform

wordpress - 如何删除action hooking非静态方法和类无法实例化