Windows 上的锯齿状字体 - Chrome 和 Safari

Question

我正在使用以下代码在我的网页上使用自定义字体：

@font-face {
    font-family: 'HelveticaNeueBold';
    src: url('fonts/HelveticaNeueBold.eot');
    src: url('fonts/HelveticaNeueBold.eot?#iefix') format('embedded-opentype'),
         url('fonts/HelveticaNeueBold.woff') format('woff'),
         url('fonts/HelveticaNeueBold.ttf') format('truetype'),
         url('fonts/HelveticaNeueBold.svg#HelveticaNeueBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

这适用于 Mac 上的所有浏览器，但在 Chrome 和 Safari 上的 PC 上查看它会出现锯齿状。有什么修复方法可以让它们看起来都一样吗？下面显示了区别（左侧是 Mac，右侧是 PC - 都在 Chrome 上）。

Answer 1

PC 上的@font-face 字体通常看起来更复杂一些，但“提示”字体会提高可读性。

尝试通过字体松鼠转换器运行您的字体，它可以将提示作为转换的一部分进行处理。

http://www.fontsquirrel.com/fontface/generator

作为旁注，我也不会将@font-face 用于 Helvetica，而只是依靠安装字体的人，然后退回到 Arial。不是最接近的匹配，但它会给你最好的结果。

Answer 2

Chrome 似乎不喜欢在 CSS @font-face 声明中最后调用 SVG。在 CSS 中的 @font-face { ... } 之后添加：

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'HelveticaNeueBold';
    src: url('fonts/HelveticaNeueBold.svg') format('svg');
  }
}

@media 查询以 webkit 浏览器为目标，并告诉它们仅使用 .SVG 文件。根据我的经验，这可以改善 Windows Chrome 上的渲染效果。

注意：此修复程序可能会在 Windows 7 或 8 上的 Chrome 中导致另一个问题，我在某些情况下遇到过：使用此修复程序有时会阻止 Windows 上的 Chrome 中的自动换行。一种非常奇怪的行为，有时只会发生，我还没有找到解决方案。此处发布了一个关于此的问题：

Strange word length issue when using font-face in Chrome

Answer 3

你可以试试：

-webkit-transform: rotate(-0.0000000001deg);

这会旋转元素以使浏览器将其呈现为抗锯齿。不知道它对性能有什么影响，但我没有注意到渲染有任何差异。

在这里找到解决方案：https://twitter.com/#!/komejo/statuses/117241707522818048

Answer 4

是的，有。使用 cufon 之类的替代字体以获得平滑字体。

Answer 5

我不确定您使用的是什么操作系统，但您可能需要为屏幕字体启用 ClearType。

在 XP 中：转到 显示 控制面板，然后选择 外观 标签。从那里，点击效果。选中使用以下方法平滑屏幕字体边缘复选框，然后在列表中选择ClearType。

这已经解决了我过去的问题。

Answer 6

这是 Windows 和 OS X 处理字体渲染方式的根本区别，因此您几乎无能为力。 Chrome 的一个 hacky 修复是添加一个几乎不可见的阴影 (text-shadow: rgba(0, 0, 0, .01) 0 0 1px)，这会强制它对文本进行抗锯齿处理。 Typekit 等服务正在努力解决问题，例如 serving fonts as Postscript outlines，但这对您的问题没有多大帮助。

Answer 7

这似乎可以解决问题：

html {
    -webkit-text-stroke-width: .10px;
}