在CSS中使用@ font-face的Windows字体呈现问题

我在Windows电脑上遇到了@ font-face的麻烦（不pipe是什么浏览器）。它在linux和osx中工作正常。

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

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

在窗户上，字体是“跳舞”的。基线上没有alignment。
在Windows上，字体看起来没有反锯齿。

任何人有一个想法？提前致谢。

OSX和Linux屏幕截图：

http://img.zgserver.com/css/ob_font1.png

Windows中的屏幕截图：

http://img.zgserver.com/css/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; }

我们有一些与我们的字体类似的问题，我非常确定它将“Truetype Hinting”设置为“Keep existing”。

在这里输入图像说明

几个星期前我还面临同样的问题。我们在一个字体文件中存储矢量图形，以避免实现单独的图像或CSS的精灵。一个简单的解决方法是使用例如字体松鼠

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

没有（！）优化选项，它处理你的字体来优化它的网页，有时如果他们不符合某些标准压缩企图，它会打破它。一个可能的缺点可能是，你的文件变得更大一些。你也可以试试这个web服务：

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

希望这可以帮助！

那么只要抗锯齿，窗口可以是非常丑陋的，当呈现一个薄的文本。一个常见的技巧就是尝试应用如下的文本描边：

 -webkit-text-stroke: 0.3px

至于你的基线问题，这似乎是与实际字体的问题。如果你没有附加到@ font-face，我很偏爱Google Webfonts

你只需要在你的头文件中包含一个css链接，然后将相应的字体附加到一个css类。

在这里出去走走，但是我想你上传（非法？）一个网站建成的替代Helvetica到FontSquirrel.com的“自己动手”的@ face-kit … tisk tisk。

你得到的结果是非常典型的个人电脑如何在屏幕上呈现字体。

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

TexGyre在字体松下是一个相当公平的（虽然，不是很漂亮）替代Helvetica，而且在PC，Mac等上看起来不错。