2011-03-12 17 views
1

我们有一些非标准的网络字体(我们有许可证),并且我们收到了该字体的 .otf版本。有一些在线工具可以将字体转换为网页格式,然后用一些CSS来包含字体,到目前为止非常好。@ font-face为不同的文件显示不同的字母间距

但是,当在不同浏览器中显示文本时,渲染文本变得更宽/更小,并且字间距也会变化。我测试过以确保字体实际上在不同的浏览器中使用,并且一切正常。

有4种字体文件需要支持所有浏览器,并且它似乎每个文件都有自己的继承字母间距和字间距为每个字体大小使用。

如果你想看到的包括在这里的讲话,它是:

@font-face { 
    font-family: 'myfont'; 
    src: url('myfont.eot?') format('eot'), 
     url('myfont.woff') format('woff'), 
     url('myfont.ttf') format('truetype'), 
     url('myfont.svg#webfontaAipHhrc') format('svg'); 
    } 

我认为解决这个问题的最好办法是TE产生在不同模式格式的字体具有相同字处理和信 - 间距,只有我不知道如何做到这一点。

字体内部使用EM作为glypth宽度。因此,将文档font-size设置为某个值并使用相应的字体进行缩放,然后为使用该字体的每个元素设置一个字体大小是有意义的。

同时在@ font-face定义中设置字母和单词间距不起作用,因为它是对字体自己设置的间距的调整。

任何maby都知道字体生成器对每个生成的字体都有相同的单词和字母间距?或者有其他的解决方案/建议?

我试过2台字体发电机,但只记得最后一个,http://www.fontsquirrel.com/fontface/generator

也同时是它,任何人都知道如何测试,如果所有语言(UTF-8字符)可以打印给出的字体?我试图打印一串utf-8字符,看看它们是否可以显示,但当然我不知道所有的语言,所以我不知道它的好与不好。

谢谢:)

编辑:

我做的如何不同的浏览器,我使用渲染字体

http://www.imagedump.nl/img9/8589/15fonts.png

使用

部份CSS printscreens:

.test { 
    font-family: myfont; 
    font-size: 20px; 
    letter-spacing: -0.67px; 
    word-spacing: 1px; 
} 

我寻找的东西是有一些默认的起始位置,所有浏览器呈现字体相同

与'不同'部分我认为像ff这样的浏览器呈现文本不同于像IE这样的浏览器,谁两者都使用不同的生成字体文件。 但是当它们都使用相同的生成字体文件(woff)时,chrome与ff也有区别

回答

1

问题中没有足够的细节来理解问题。浏览器确实使用字体的内部空间。根据显示的位置不同,它不是“不同的”。

也就是说,应用于字体的提示可能会影响其在Window浏览器上的显示,因为它会尝试将字体轮廓放入像素网格中。通过这样做,整个字体可以水平增长/缩小,以适应网格。我已经看到了。

请问这是你所看到的吗?否则,我希望看到并排的截图,以便我能够理解你在说什么。

+0

已编辑的原始文章 – 2011-03-12 15:05:18

+0

这可能是由于光栅化器和应用于字体的提示。由于Windows使用了几种不同的渲染引擎,因此我对您的结果并不感到惊讶。您可以尝试取消选中生成器中的提示选项,看看它是否有帮助。 – 2011-03-17 02:12:39

+0

@Paul,是否有助于取消提示? – Michael 2011-09-05 11:35:32

0

为了解决这个问题,在我看来,仅仅使用一些浏览器特定的指令来呈现字体是恰当的。我没有足够的精通知道在这种情况下工作的p和h标签上的浏览器特定样式的CSS。

+0

感谢您的评论,我真的想避免这种情况,因为它将是浏览器/浏览器版本/ os/os版本依赖的CSS,这意味着很多css文件。但是,这听起来像是唯一的选择 – 2011-03-19 08:18:56

相关问题