Windows 上的锯齿字体 - Chrome 和 Chrome狩猎之旅

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 上的所有浏览器中都可以正常工作，但在 PC 上的 Chrome 和 Safari 上查看它时，它会出现锯齿状。我可以使用任何修复来使它们看起来都一样吗？下面显示了差异（左侧为 Mac，右侧为 PC - 均在 Chrome 上）。

Answer 1

PC 上的 @font-face 字体通常看起来有点笨拙，但“提示”字体会提高可读性。

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

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

作为旁注，我还只是不要对 Helvetica 使用 @font-face，而只是依靠安装了该字体的人，回退到 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 中的自动换行。一种非常奇怪的行为，只有时发生，我还没有找到解决方案。有关于此的问题已发布在这里：

奇怪的字长在 Chrome 中使用 font-face 时出现问题

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 的一项巧妙修复是添加一个几乎不可见的阴影 (text-shadow: rgba(0, 0, 0, .01) 0 0 1px)，强制它对文本进行抗锯齿处理。像 Typekit 这样的服务正在努力解决这个问题，例如 将字体作为 Postscript 轮廓，但这对您的问题没有太大帮助。

Answer 7

这似乎可以解决问题：

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