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

我在Windows计算机上使用@ font-face时遇到了麻烦（无论哪种浏览器）。它在linux和osx中可以正常工作。在CSS中使用@ font-face的Windows字体呈现问题

这是我使用（与字体squirel产生）

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

Windows上的字体都是'跳舞'。这些不在基线上对齐。
在Windows上，字体看起来没有反锯齿。

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

截图在OSX &的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; 
}

来源

2012-02-14 Jeroen Gerits

1）这第一张截图是不是OS X可言，这是Linux的只有2）回到字体松鼠的发电机，选择专家选项，并确保提示已启用。用新生成的字体文件替换，看看渲染是否改进。 – BoltClock 2012-02-14 11:37:21

感谢boltclock，你的权利，这是一个Linux的截图。我马上尝试了你的建议。但我没有给出解决方案。我确实看到默认情况下选中“提示”。无论如何，我只是试图确保。这也不是一个缓存问题（我给字体新的文件名，并改变了CSS文件路径）。 – 2012-02-14 12:00:26

[我试过这个答案]（http://stackoverflow.com/a/9087123/1428241），但我不会在Firefox上工作，也没有工作完全正确，问题是显示utf-8外国charahters在铬/ safari /歌剧。 – 2013-03-18 22:27:44

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

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

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

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

希望这有助于！

来源

2013-03-18 22:38:45 fje

我已经在使用这些网站，现在尝试了您的方法;转换字体没有优化。这是没用的/： – 2013-03-20 08:57:36

好，只要抗锯齿，窗口可以是非常丑陋的时候渲染出一个薄的文本。一种常见的伎俩是尝试应用文本笔画像这样：

-webkit-text-stroke: 0.3px

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

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

来源

2013-03-19 05:54:13

这些不是最健康的方式，但'文字阴影：0 0 1px＃ccc'也能解决我们的问题。 – 2013-03-25 07:48:43

他们不以同样的方式工作。这真的取决于偏好，甚至可能是你的配色方案，但根据我的经验，尝试使用“文字 - 阴影”并没有为我提供所需的外观，即提供了“-webkit-text-stroke” – 2013-06-11 15:59:27

在这里走出一条腿，但我想你上传（非法？）一个预先网络构建的替代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

TexGyre上fontsquirrel是一个非常公平的（虽然不漂亮）替代Helvetica字体，看起来在PC，Mac电脑好，等

来源

2013-03-23 16:24:34 Dawson

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

enter image description here

来源

2013-08-12 23:38:06

这解决了我们的问题，在所有Windows浏览器上呈现蒙特塞拉特。（我与小一点的我没什么区别。）感谢提示！ – natebeaty 2015-01-21 17:14:55

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

回答

相关问题