在Windows和Mac上@ font-face抗锯齿

Question

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

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

Answer 1

我也一直在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;
}

希望它也适合你。享受！

Answer 2

我很惊讶没有人提到这一点。无论您使用的字体的格式（扩展名）如何，应用轻微的-webkit-text-stroke都可以为我提供帮助。有人建议使用-webkit-text-stroke：1px，但对我来说它会改变字体外观（使其太强）。但是0.5px的一个使得笔画几乎无法察觉，并且它打开抗锯齿：

-webkit-text-stroke: 0.5px;

将它放在html标签的css定义中，你就完成了！

Answer 3

这看起来就像在WinXP中渲染字体一样丑陋。一些人（IMO：误入歧途）的人甚至更喜欢它。

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

IE7 +默认情况下启用选项 - 始终使用ClearType消除锯齿来在Web浏览器中呈现字体。其他Web浏览器将遵循用户配置的字体呈现方法。令人遗憾的是，很多人仍然关闭了这个有益的设置，但这不是你真正的问题。

（有令人讨厌的黑客攻击让Chrome在文字上执行某些抗锯齿，这是：

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

但我真的不推荐它。）

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

Answer 4

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

Answer 5

我做了一些研究，我发现了一个我觉得有所作为的黑客攻击。用你的字体变量把它放在你的CSS中：

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

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

Answer 6

更改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中不再有效。

我找不到克服这个问题的方法。

Answer 7

这是用于修复“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');
    }
}

:)它对我有用......最后！

Answer 8

  

-webkit-transform：rotate（-0.0000000001deg）;

     

更新：不再使用Chrome 15.0.874.106 m。虽然它在IE9和Firefox中有效 - ＆gt; Zequez 11月4日15:28

更新：这在Chrome 15.0.874.121 m中起作用（至少对我而言）。

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