【问题标题】:How to get smooth Google fonts?如何获得流畅的谷歌字体?
【发布时间】:2014-03-11 04:42:13
【问题描述】:

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

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

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

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

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

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

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

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

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

【问题讨论】:

    标签: css wordpress google-font-api


    【解决方案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>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-07-09
      • 1970-01-01
      • 2017-08-30
      • 2021-08-02
      • 1970-01-01
      • 2023-03-18
      • 2015-08-01
      • 1970-01-01
      相关资源
      最近更新 更多