Question

我已经看过很多帖子，但人们写道，它只是在Windows Chrome中呈现不正确。在我的情况下，它是大多数浏览器，包括IE的。 Cleartype默认情况下处于启用状态，因此不是问题。

我无法相信Windows无法正常处理Google字体。也许，那里的某个人可能有一个可行的解决方案或合理的后备。

对Windows机器使用Arial是否明智？是否有检测操作系统类型的脚本，如果是，我应该实现吗？我知道我应该选择一个基本的字体，但我不妨请OSX人群呢？

编辑：

我应该补充说我正在使用新闻周期。它甚至在Google Fonts网站上看起来有点糟糕，只有18px及以下。

Answer 1

我不知道锯齿状渲染问题，但对于后备，您可以使用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 User Agent，它会根据操作系统向元素添加类。

Answer 2

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

编辑：谷歌上的字体有很多资源。你需要研究'字体堆栈'，这将有助于你选择后备字体。恕我直言，我不认为在这种情况下用户代理嗅探是必要的......

这是一篇非常好的文章，虽然有点旧： http://coding.smashingmagazine.com/2009/09/22/complete-guide-to-css-font-stacks/

Answer 3

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

-webkit-text-stroke-width: .5px;

Windows中的Google字体是锯齿状的

3 个答案: