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

Question

我在Windows计算机上遇到了@ font-face的问题（没有什么浏览器）。它在linux和osx中运行正常。

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

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

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

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

OSX中的屏幕截图＆amp; Linux操作系统：

http://j3rn.org/images/ob_font1.png

Windows中的屏幕截图：

http://j3rn.org/images/ob_font2.png

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精灵。一个简单的解决方法是使用例如font 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的“自己动手”@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

Texrabrel上的TexGyre是一个非常公平的（但不是很漂亮）替代Helvetica，它在PC，Mac等上看起来很不错。