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

Question

我在 Windows 计算机上使用 @font-face 时遇到问题（无论使用什么浏览器）。在 linux 和 osx 下都可以正常工作。

这是我正在使用的CSS代码（用font-squirel生成）

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

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

有人有主意吗？提前致谢。

OSX 和 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”。

Answer 2

几周前我遇到了同样的问题。我们将矢量图形存储在字体文件中，以避免实现单独的图像或 CSS 精灵。一个简单的解决方法是使用例如字体 squirrel

http://www.fontsquirrel.com/tools/ webfont-generator

不带（！）优化选项，该选项会处理您的字体以针对网络进行优化，有时会因压缩尝试而破坏它（如果它们不符合某些标准）。一个可能的缺点可能是您的文件会变得更大一些。您也可以尝试这个网络服务：

http://fontface.codeandmore.com/indexnew.php

希望这有帮助！

Answer 3

就抗锯齿而言，渲染细文本时窗口可能会非常难看。一个常见的技巧是尝试像这样应用文本笔画：

-webkit-text-stroke: 0.3px

就您的基线问题而言，这似乎是实际字体的问题。如果您不喜欢 @font-face，那么我非常偏爱 Google Webfonts

只需在标头中包含一个 css 链接，然后将相应的字体附加到 css 类即可。

Answer 4

在这里冒险，但我认为你上传了（非法的？）一个预网络构建的 Helvetica 替代品到 FontSquirrel.com 的“roll-your-own”@face-kit... tisk tisk。

您得到的结果与 PC 在屏幕上呈现字体的方式非常典型。

FF Schulbuch Nord：创建于 1991 年（如果你想从 fontshop.com 购买，售价为 239 美元）。
http://www.fontshop.com/fonts/singles/fontfont /ff_schulbuch_nord_ot_regular/&s=c

fontsquirrel 上的 TexGyre 非常漂亮Helvetica 的公平（虽然不是那么漂亮）的替代品，而且它在 PC、Mac 等上看起来不错。