css - CSS 中 @font-face 的 Windows 字体渲染问题

Question

我在 Windows 计算机上使用 @font-face 时遇到问题(不管是什么浏览器)。它在 linux 和 osx 中工作正常。

这是我正在使用的 css 代码(使用 font-squirel 生成)

查看问题的屏幕截图..似乎有2个问题

• 在 Windows 上，字体在“跳舞”。它们未在基线上对齐。
• 在 Windows 上，字体看起来没有消除锯齿。

有人有想法吗？提前致谢。

OSX 和 Linux 中的屏幕截图:

_{(来源:j3rn.org)}

Windows 中的屏幕截图:

_{(来源:j3rn.org)}

CSS 代码

@font-face {
    font-family: 'SchulbuchNordFett';
    src: url(assets/fonts/schulbuchnord-fett-webfont.eot');
    src: url('assets/fonts/schulbuchnord-fett-webfont.eot?#iefix') format('embedded-opentype'),
         url('assets/fonts/schulbuchnord-fett-webfont.woff') format('woff'),
         url('assets/fonts/schulbuchnord-fett-webfont.ttf') format('truetype'),
         url('assets/fonts/schulbuchnord-fett-webfont.svg#SchulbuchNordFett') format('svg');
    font-weight: normal;
    font-style: normal;
}

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

Answer 1

我们的一些字体也有类似的问题，我很确定是什么解决了这个问题，将“Truetype Hinting”设置为“Keep existing”。