Windows 和 Mac 上的@font-face 抗锯齿答案

【问题标题】：@font-face anti-aliasing on windows and macWindows 和 Mac 上的@font-face 抗锯齿
【发布时间】：2011-05-02 21:58:24
【问题描述】：

我使用http://www.fontsquirrel.com/ 创建了一个@font-face 套件。
它工作正常，但 windows 上的结果与 mac 上的结果不同。
在 Windows 上，字体似乎具有错误的抗锯齿功能：
这是在 Mac 上使用 FF、Chrome 或 Safari（均已更新到最新版本）的结果。
这是在带有 FF 或 Chrome 的 Windows。

如您所见，结果并不相同。在 Windows 上，字体更粗更粗。
我该如何解决这个问题？

【问题讨论】：

标签： css font-face antialiasing font-embedding

【解决方案1】：

这看起来就像在 WinXP 中呈现字体的正常丑陋方式。一些（IMO：被误导的）人甚至更喜欢它。

要在 XP 上获得桌面字体的抗锯齿，您必须打开它，从显示属性 -> 外观 -> 效果 -> 使用以下方法平滑屏幕字体的边缘 -> ClearType。默认设置“标准”是老式的 Windows“字体涂抹”技术，只会费心打开较大的字体，然后经常会弄得一团糟。

IE7+ 有一个选项——默认开启——总是使用 ClearType 抗锯齿在网络浏览器中呈现字体。其他网络浏览器将尊重用户配置的字体渲染方法。很遗憾还有这么多人关闭了这个有益的设置，但这不是你的问题。

（有一个讨厌的 hack 可以让 Chrome 对文本执行一些抗锯齿，即：

text-shadow: 0px 0px 1px rgba(0,0,0,0);

但我真的不推荐它。）

当“使用以下方法...”设置设置为“标准”时，您可以做的一件事是尝试使字体获得某种形式的抗锯齿，是检查有问题的字体没有GASP 表告诉老式TrueType 渲染器在特定字体大小下禁用抗锯齿。您可以更改 GASP 表 using a font editor 或使用 ttfgasp.exe 命令行工具。

【讨论】：

我尝试在 Windows 上启用 ClearType，但问题仍然存在。我也在检查 GASP 表，但是：你看到其他解决方案了吗？你认为使用不同的字体类型（woff、eot、svg 等）可以改变什么吗？
我不这么认为，不。将轮廓转换为 Type 1 格式的贝塞尔曲线而不是 TTF 样条曲线可以对用于非 ClearType 字体平滑的渲染器产生影响，但这是一个相当激烈的步骤。你能把字体放在某个地方检查吗？哦，另一件事：锯齿状的渲染是否会出现在您使用该字体的任何地方，即使是在一个微不足道的测试页面中？关闭抗锯齿功能还有其他原因，特别是当您使用 IE filter 样式时（通常是复制 opacity）。
字体是 Myriad Pro（这是 Mac 上的标准字体，但不是 Win 上的）。如果你愿意，我可以 PM 你我正在开发的网站，这样你就可以看到它。
好的，但请记住，Mac 捆绑的 Myriad 未获得 Web 嵌入许可。据我了解，目前嵌入 Myriad 的唯一合法方式是通过 Typekit。
我没有考虑法律问题。我将替换为图像或使用其他字体。感谢您的大力帮助！

【解决方案2】：

还有一种名为 Vegur 的字体，看起来像 Myriad Pro，但嵌入网站是合法的。希望对您有所帮助！

【讨论】：

+1 有很多字体看起来像 Myriad，或者更确切地说是 Frutiger，这是 Myriad 受到“影响”的字体。 “看起来像 Frutiger 的人文主义 sans”现在几乎是一种类型！

【解决方案3】：

我做了一些研究，发现了一个我认为会有所作为的 hack。把它和你的字体变量一起放在你的 CSS 中：

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

同样，我发现全黑 (#000000) 也无济于事。使用非常暗的似乎对我有帮助。

【讨论】：

对我来说，抗锯齿直到rotate(-0.03deg) 才适用。此外，在 Canvas 中，您可以执行 setTransform(1, 0.001, 0, 1, 0, 0) 并且它也会被反锯齿化。
更新：Chrome 15.0.874.106 m 不再工作。虽然它确实适用于 IE9 和 Firefox

【解决方案4】：

-webkit-transform: 旋转(-0.0000000001deg);

更新：不再在 Chrome 15.0.874.106 m 中工作。虽然它在 IE9 和 Firefox 中确实有效 - >Zequez 11 月 4 日 15:28

更新：这在 Chrome 15.0.874.121 m 中有效（至少对我而言）。

IE9 和 Firefox 不应该需要它，或者被它作为目标，因为选择器指定了 -webkit-。

【讨论】：

【解决方案5】：

在 Windows 或浏览器中更改设置不是解决方案。当您使用 @font-face 时，您希望字体在每个浏览器的每个屏幕上都看起来不错，而不仅仅是在您的屏幕上。

技巧

text-shadow: 0 0 1px rgba(255,255,255,0.1);

或

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

在 Chrome 16.0.912.63 m、Windows Vista 中不再工作。

但我找不到解决此问题的方法。

【讨论】：

【解决方案6】：

我在 Chrome 上也一直被这个问题困扰，我想我刚刚找到了答案！

Chrome 不喜欢默认的 fontsquirrel.com 生成的 CSS。

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

为了修复，我移动了 SVG 线：

url('/_styles/hlc/hl-webfont.svg#HLC') format('svg')

到列表的顶部。现在我看到了抗锯齿字体！我猜 Chrome 想成为第一……

/* THIS WORKS FOR ME */
@font-face {
    font-family: 'HLC';
    src: url('/_styles/hlc/hl-webfont.eot');
    src: url('/_styles/hlc/hl-webfont.svg#HLC') format('svg'),
         url('/_styles/hlc/hl-webfont.eot?#iefix') format('embedded-opentype'),
         url('/_styles/hlc/hl-webfont.woff') format('woff'),
         url('/_styles/hlc/hl-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

希望它也对你有用。尽情享受吧！

【讨论】：

我使用的是来自 google web fonts 的 Open Sans，在阅读完这篇文章后，我检查了包中包含哪些字体。它只返回 woff 文件，所以我去了 fontsquirrel，下载了包并应用了你的修复程序，它有效！这很奇怪，因为在 google 的网络字体网站上，它们也缺乏抗锯齿功能。
@tq 是的，这以前可以工作；我认为直到版本 18 或 19，现在它呈现 SVG 文本的方式与呈现普通文本的方式相同。 :(
我没有在 Chrome 版本 23.0.1271.64 m 上看到我的网站有任何变化。请随时 PM 我，我不介意尝试复制或帮助解决问题。
它适用于我，版本 25.0.1364.152 m 和字体 KaushanScript 和 Ubuntu。
在 windows 中的 chrome 中完美地为我工作，而 Firefox 则没有那么多。

【解决方案7】：

我很惊讶没有人提到这一点。无论您使用的字体的格式（扩展名）如何，应用轻微的 -webkit-text-stroke 对我来说都是诀窍。有些人推荐 -webkit-text-stroke: 1px 但对我来说它改变了字体看起来太多（让它太强）。但是一个 0.5px 的笔触使笔触几乎不明显，并且它打开了抗锯齿：

-webkit-text-stroke: 0.5px;

把它放在你的css定义中，你就完成了！

【讨论】：

这里对我不起作用（Chrome 24 / Win XP / ClearType 已禁用）。
在默认情况下正确呈现字体的 OSX 等操作系统中对此有何影响？它会让它变得更加强大吗？
适用于 Chrome 26.0.1410.64 Windows 7 ClearType 已启用。但这仍然是一个黑客。不再是同一种字体了。
我最近在使用 jQuery 处理移动下拉菜单时遇到了全局设置文本笔划的问题，因为它有时会导致 slideDown/slideUp/slideToggle 效果中的“滞后”，所以我现在使用这个css方法有点谨慎。

【解决方案8】：

这是我用来修复“Chrome 渲染问题”的代码：

@font-face {
    font-family: 'fontname';
    src: url('fonts/fontname.eot');
    src: url('fonts/fontname.eot') format('embedded-opentype'),
    url('fonts/fontname.svg') format('svg');
}

/*if mozilla*/
@-moz-document url-prefix() { 
    @font-face {
        font-family: 'fontname';
        src: url('fonts/fontname.ttf') format('truetype');
    }
}

:) 它对我有用...终于！

【讨论】：