在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桌面上的字体,你必须打开它,从显示属性 - >外观 - >效果 - >使用下列方式使屏幕字体的边缘 - >的ClearType.默认设置"标准"是老派的Windows"字体污迹"技术,只在困扰较大的字体大小打开,然后往往使一个烂摊子.

IE7 +有一个选项,在默认情况下,始终使用ClearType抗锯齿呈现在Web浏览器的字体.其他Web浏览器将遵循用户配置的字体呈现方法.这是一个耻辱,所以很多人也有这种有益的设置关闭,但它不是真正的你的问题.

(有令人讨厌的黑客让Chrome 在文本上执行一些抗锯齿,这是:

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

但我真的不推荐它.)

当"使用以下方法..."设置设置为"标准"时,你可以做的一件事,试图使字体得到某种形式的抗锯齿,是检查有问题的字体是否没有一个GASP告诉老式TrueType渲染器的表,以禁用特定字体大小的抗锯齿.您可以使用字体编辑器或ttfgasp.exe命令行工具更改GASP表.

Answer 4

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