当我们使用text-transform时,为什么IE7要求EOT字体包含小写字形:大写?

时间:2011-06-17 09:13:01

标签: css internet-explorer-7 font-face eot

本周,在使用@font-face构造嵌入EOT字体文件时,我们偶然发现了IE7中一个相当奇怪的错误(惊喜,惊喜)。

为节省带宽,我们经常使用我们知道不会在网站上使用的字体编辑出字符集。在这个特定的实例中,我们将这个字体用于标题大小写的标题,但是使用text-transform属性以大写形式显示。从逻辑上讲,我们只使用大写字符保存了所有字体文件,因为我们根本不使用小写字母。

该站点在支持@font-face构造的每个浏览器(包括IE6和IE8)中都完美呈现,除了IE7之外。 IE7只以正确的字体显示每个单词的第一个字符 - 其余字符以浏览器默认字体显示。

抓住我们的头脑,我们终于弄明白,因为标题实际上是作为标题大小写(因此包含小写字符),即使部署了text-transform属性并且字符以大写字母显示,IE7也需要EOT文件中存在的小写字母,用于显示大写字符。 (直觉,不是吗?)

简单的修复是重建包含大写和小写字形的EOT文件,即使从不使用小写字符。

如何正确解决这个问题?(即让IE7渲染大写字符而不必在字体中包含小写字形。)

谢谢!

3 个答案:

答案 0 :(得分:4)

我认为您已经有了最好的解决方案 - 只需在.eot中包含大写和小写字形。

您的服务器正在使用HTTP压缩。

当前.eot22.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可以为空,字体大小不会增加。