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/

相关文章:

css - 在 css 中创建笔高亮效果的更简洁方法?

html - 停止显式内联宽度大于父 div 的 img

wordpress - 有没有办法在将商品添加到购物车之前连接到 WooCommerce

php - 如何修复 'Adding An element to array rather than replacing it'?

css - 在电子邮件中添加 Google 字体

fonts - 按需加载字体

css - 在 &lt;header&gt; 中使用两个 <nav> 元素是否有惩罚

html - 如何在手机上显示汉堡图标 "&#9776;"?

wordpress - slider 旋转响应背景大小值

Flutter/如何获取谷歌字体家族列表