当我们使用 text-transform: 大写时，为啥 IE7 要求 EOT 字体包含小写字形？

Posted 2023-03-15

【中文标题】当我们使用 text-transform: 大写时，为啥 IE7 要求 EOT 字体包含小写字形？

【英文标题】：Why does IE7 require EOT fonts to include lowercase glyphs when we use text-transform: uppercase?当我们使用 text-transform: 大写时，为什么 IE7 要求 EOT 字体包含小写字形？

【发布时间】：2011-09-17 00:58:50

【问题描述】：

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

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

该网站在所有支持@font-face 结构的浏览器（包括 IE6 和 IE8）中都能完美呈现，IE7 除外。 IE7 只以正确的字体显示每个单词的第一个字符——其余字符以浏览器的默认字体显示。

摸不着头脑，我们终于发现，由于标题实际上是写成标题大小写的（因此包含小写字符），即使 text-transform 属性已部署并且字符以大写形式出现，IE7 仍需要小写字母存在于 EOT 文件中以显示大写字符。 （很直观，不是吗？）

简单的解决方法是使用大写和小写字形重建 EOT 文件，即使从未使用过小写字符。

在线问题：http://www.testdomeinnaam.nl/mike/

我该如何正确解决这个问题？（即让 IE7 呈现大写字符，而不必在字体中包含小写字形。）

谢谢！

【问题讨论】：

您是否尝试将text-transform 放在@font-face 之前？还要检查 IE6 是否在没有 IE7JS 脚本的情况下正确呈现。

【参考方案1】：

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

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

当前的.eot 是22.62 KB，它被压缩到13.87 KB。

即使添加大写字形加倍大小，它仍然只会被~28 KB压缩。

除非对问题有简单的“实际解决方案”，否则请坚持下去。

【讨论】：

如果您确实找到了解决此问题的方法，请对我的回答发表评论，让我知道。谢谢。

【参考方案2】：

是否可以在服务器端转换案例？比如php有这个：http://php.net/manual/en/function.strtoupper.php

如果可以使用这样的功能，这可能会解决您的 IE7 问题。

【参考方案3】：

a 刚遇到同样的问题，很快解决了：

对于 ie7 来说，使用 text-transform "uppercase" 正确呈现字体对于 ie7 来说，在字体文件中定义小写字母就足够了，它们不需要包含真正的字母 = 它们是字体中的小写字母-file 可以为空并且字体的大小不会增加。