Windows上的Jagged字体 - Chrome＆amp;苹果浏览器

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字体通常看起来有些松懈，但“提示”字体会提高可读性。

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

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;
}