本周,在使用@font-face
构造嵌入EOT字体文件时,我们偶然发现了IE7中一个相当奇怪的错误(惊喜,惊喜)。
为节省带宽,我们经常使用我们知道不会在网站上使用的字体编辑出字符集。在这个特定的实例中,我们将这个字体用于标题大小写的标题,但是使用text-transform
属性以大写形式显示。从逻辑上讲,我们只使用大写字符保存了所有字体文件,因为我们根本不使用小写字母。
该站点在支持@font-face
构造的每个浏览器(包括IE6和IE8)中都完美呈现,除了IE7之外。 IE7只以正确的字体显示每个单词的第一个字符 - 其余字符以浏览器默认字体显示。
抓住我们的头脑,我们终于弄明白,因为标题实际上是作为标题大小写(因此包含小写字符),即使部署了text-transform
属性并且字符以大写字母显示,IE7也需要EOT文件中存在的小写字母,用于显示大写字符。 (直觉,不是吗?)
简单的修复是重建包含大写和小写字形的EOT文件,即使从不使用小写字符。
如何正确解决这个问题?(即让IE7渲染大写字符而不必在字体中包含小写字形。)
谢谢!
答案 0 :(得分:4)
我认为您已经有了最好的解决方案 - 只需在.eot
中包含大写和小写字形。
您的服务器正在使用HTTP压缩。
当前.eot
为22.62 KB
,并将其压缩为13.87 KB
。
即使添加大写字形加倍大小,它仍然只会被~28 KB
压缩。
除非对问题进行简单的“实际修复”,否则请坚持下去。
答案 1 :(得分:1)
是否可以在服务器端转换案例?例如,php有:http://php.net/manual/en/function.strtoupper.php
这可能会解决您的IE7问题,如果使用这样的功能是可行的。
答案 2 :(得分:0)
刚刚遇到同样的问题而且快速解决了:
对于ie7使用text-transform“大写”渲染字体是正确的ie7足以使小写字母在字体文件中定义,它们不需要包含真实字母=它们在字体中是小写字母-file可以为空,字体大小不会增加。