Question

我一直在搜索这个问题，但没有清楚地了解这个问题。 我在某些Windows 7浏览器上获得了相当难看的像素化字体效果图。我在@font-face中使用了CSS。

这是@font-face问题吗？我应该使用<link>来链接字体吗？

我该如何解决这个问题？

Answer 1

我假设您的CSS格式完美。

我也对此感到沮丧。我将尝试分享我的经验：大多数浏览器使用随浏览器安装的字体渲染引擎。 Firefox和IE这样做，他们很好地显示字体。然而，Chrome以不同的方式做事。它使用本机OS字体渲染引擎，并创建盲点。在Windows上（根据我的经验W7和W8），即使在更改OS字体渲染设置之后，对于替换字体（例如Google Web字体），渲染也一直很难看。一些奇特的CSS规则似乎有所帮助（-webkit-font-smoothing），但它从未完全修复像素化问题。

出于开发目的，我建议忽略Chrome上的像素化字体并查看Firefox或IE或Mac设备。

关于字体渲染有很多话要说，我建议阅读它们。这个链接可以帮助您入门：http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

编辑：由于我现在是Mac用户，我无法检查它，但我认为这是一个webkit问题，所以当我说Chrome时，我的意思是Safari。

Answer 2

如果它是Windows的东西，那么Windows兼容浏览器可能会出现问题，使用CPU而不是GPU来渲染各种图形 - 包括矢量/字体

添加：

body {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
}

到你的CSS，为了强制使用计算机GPU - 你应该更好地看到你的字体。

Windows浏览器上的Pixelated font-face

2 个答案: