Question

我们有一些非标准的网页字体（我们有许可证），我们收到了 .otf那个字体的版本。有一些在线工具可以将字体转换为网络格式，然后使用一些css，你可以包含字体，到目前为止一直很好。

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

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

如果你想在这里看到include语句，那就是：

@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');
    }

我认为处理这个问题的最好方法是生成不同格式的字体，使用相同的单词和字母间距，只有我不知道如何实现这一点。

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

在@ font-face定义中设置字母和单词间距也没有效果，因为它是调整设置的字体自身间距。

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

我尝试了2个字体生成器，但只记得最后一个，http://www.fontsquirrel.com/fontface/generator

同时在这里，有人知道如何测试所有语言（utf-8字符）是否可以打印给定字体？我尝试打印一堆utf-8字符，看看它们是否可以显示，但当然我不知道所有语言，所以我不知道它是否可以。

谢谢：）

修改

我制作了关于我使用的不同浏览器如何渲染字体的打印屏幕

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

使用css：

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

我正在寻找的是拥有一些默认的起始位置，所有浏览器都将字体呈现相同的

与'不同'部分相反，像ff这样的浏览器呈现的文本与浏览器不同，即两者都使用不同的生成字体文件。但是当他们使用相同的生成字体文件（woff）时，chrome与ff之间也存在差异

Answer 1

您的问题没有足够的细节来理解这个问题。浏览器确实使用字体的内部间距。它不是“不同”，取决于它的显示位置。

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

这可以说明您所看到的内容吗？否则，我希望看到并排的屏幕截图，这样我才能理解你在说什么。

Answer 2

为了解决这个问题，在我看来，只需使用一些特定于浏览器的指令就如何渲染字体。我不熟悉在p和h标签上浏览器特定样式的CSS，这可以在这个实例中使用。

@ font-face为不同的文件显示不同的字母间距

2 个答案: