ScottS..

5

你可能没有做错任何事情.以下是一些可能适用的要点,有些可以由您控制,有些则不可以.

只是为了确定,明确设置vertical-align: baseline.

不同的文件(.eof,.woff,.ttf)本身可以不定义是相同的,并且因此不同的浏览器使用不同的文件并显示差异.

不确定是否有两个src电话搞乱了,但你可以尝试消除第二个:

@font-face {

font-family: 'Gabriola';

src: url('Gabriola.eot'),

url('Gabriola.eot?#iefix') format('embedded-opentype'),

url('Gabriola.woff') format('woff'),

url('Gabriola.ttf') format('truetype');

font-weight: normal;

font-style: normal;

}

这些都只是猜测.你将不得不测试#1,3.如果问题是#2,我不确定是否有一个优雅的解决方案.

当然,这个网站上有一个警告:

请记住,不同浏览器和操作系统的字体呈现可能会有很大差异.许多开发人员在Windows和Internet Explorer中遇到如此糟糕的结果,他们完全避免使用自定义字体.务必在所有浏览器上仔细检查您的结果,以确定质量是否可以接受.

更新

这篇文章提供了一些可能解决渲染问题的技巧.这是Font Squirrel,他特别指出:

如果您下载了该套件,则可以尝试使用该生成器重新生成该字体.我们定期调整生成器,这可能会改善字体的提示或渲染.

但他也证实,

不要贬低,但最常见的原因是原始字体不好.

这与我的观点#2相符.

谢谢你的回答..之所以在所有浏览器中都不一样的是字体.我尝试了5种字体类型,但只有Gabriola有垂直偏移错误.所以我想这就是字体'质量'. (2认同)