@ font-face为不同的文件显示不同的字母间距
我们有一些非标准的网页字体(我们有许可证),我们收到了
.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定义中设置字母和字间距也没有效果,因为它是调整设置的字体自身间距。
任何人都知道一个字体生成器,每个生成的字体具有相同的字和字母间距?或者有其他一些解决方案/建议?
我尝试了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这样的浏览器呈现的文本与浏览器不同,即两者都使用不同的生成字体文件。
但是当它们都使用相同的生成字体文件时,chrome与ff之间也存在差异(woff)
没有找到相关结果
已邀请:
2 个回复
埃庐
邦绊门蔽惩