html - Windows 浏览器上的像素化​​字体

Question

我一直在寻找这个问题，但对这个问题没有清楚的了解。在某些 Windows 7 浏览器上，我得到了非常难看的像素化字体渲染。我@font-face在我的CSS.

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

我怎么解决这个问题？

Answer 1

我假设您的 CSS 格式完美。

我也为此感到沮丧。我将尝试分享我的经验：大多数浏览器都使用与浏览器一起安装的字体渲染引擎。Firefox 和 IE 做到了这一点，它们显示的字体非常好。然而，Chrome 的做法有所不同。它使用本机操作系统字体渲染引擎并创建盲点。在 Windows 上（根据我的 W7 和 W8 经验），即使在更改操作系统字体渲染设置之后，对于替代字体（例如 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 - 你应该更好地看到你的字体。