css - @font-face 在 windows 和 mac 上抗锯齿

Question

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

如您所见，结果并不相同。在 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;
}

希望它也对你有用。享受吧!