窗口中的谷歌字体参差不齐

Google fonts in windows is jagged

本文关键字：字体 参差不齐 谷歌 窗口      更新时间：2023-09-26

我看到了很多关于这方面的帖子，但人们写道，它只是在windows Chrome中呈现不正确。就我而言，这是包括IE在内的大多数浏览器。Cleartype在默认情况下是打开的，所以这不是问题所在。

我不敢相信windows不能正确处理谷歌字体。也许，有人可能有一个可行的解决方案或合理的退路。

在Windows机器上只使用Arial字体明智吗？有检测操作系统类型的脚本吗？如果有，我应该实现它吗？我知道我应该只选择一个基本的字体，但我也可以取悦OSX人群？

编辑：

我应该补充一点，我正在使用新闻周期。它甚至在谷歌字体网站上看起来有点糟糕，18px及以下。

我不知道锯齿状渲染问题，但为了回退，您可以使用JavaScript中的navigator.userAgent属性检测操作系统。

Windows用户代理包含子字符串NT x.y，例如NT 6.1用于Windows 7。

编辑：您也可以使用navigator.appVersion属性。这是一个示例：

if(navigator.appVersion.indexOf("Win") != -1)
    OS = "Windows";
if(navigator.appVersion.indexOf("Mac") != -1)
    OS = "MacOS";
if(navigator.appVersion.indexOf("X11") != -1)
    OS = "Unix";
if(navigator.appVersion.indexOf("Linux") != -1)
    OS = "Linux";
if(OS == "Windows") {
    //add specific styles
}

为了自动化这个过程，您可以使用CSS用户代理，它根据操作系统将类添加到元素中。

明智地选择字体，并始终进行测试。谷歌字体是一个惊人的资源，但并不是每种字体都能在所有浏览器/平台上正确显示，甚至清晰可见。

编辑：谷歌上有很多关于字体的资源。你需要研究"字体堆栈"，这将为你选择后备字体提供一些线索。IMHO，我真的不认为在这种情况下用户代理嗅探是必要的。。。

这是一篇相当不错的文章，尽管有点过时：http://coding.smashingmagazine.com/2009/09/22/complete-guide-to-css-font-stacks/

我只在Windows上的Chrome中遇到过这个问题。过去的一种解决方法是添加一个不可见的文本阴影或稍微旋转文本，但从版本16开始，这种方法就停止了。我发现，有时以下CSS属性可以帮助某些字体：

-webkit-text-stroke-width: .5px;
相关文章：