在Internet Explorer 11中，自定义字体宽度未正确呈现。

Question

在我们的一个网站上，我们使用了typotheque.com提供的字体，通过以下方式进行导入：

@import url( "http://fonts.typotheque.com/WF-XXXXX-XXXXX.css" );

在Chrome等浏览器上，字体显示正确。但在Windows 7上的Internet Explorer 11中，字体被渲染，但宽度不正确。似乎在应用字体之前已经呈现了文本的宽度。

---

因此，文本重叠并且单词没有正确换行：

---

在Chrome浏览器中，字体宽度会被计算，单词会被正确地换行。

---

我们尝试过的其他事情：

• 我们按照typotheque.com上的说明进行了操作。
• 我们确保在javascript文件之前链接了css文件，如此所述。

任何解决此问题的提示或推动都将不胜感激。您可以在这里找到网站：http://www.claireundgeorge.ch/fr/

编辑：

• 添加了word-break: break-all;：没有变化
• 删除了所有font-awesome-stuff：没有变化

- uruk

---

你使用了规则 - word-break: keep-all; 吗？ - Luís P. A.

是的，没有任何改变 - uruk

我看了你的样式表，发现在加载页面样式之前，你先加载了一堆 font-awesome 的东西。尝试改变顺序，把你自己的页面样式放在前面，特别是应用于你字体的样式。 - Aaron

已经删除了font-awesome相关内容，但效果并不理想。 - uruk

只是一个建议，如果标题和描述使用不同的颜色（对比度），会更好...也许可以将描述部分设为黑色 :) - Luís P. A.

Answer 1

我也遇到了typotheque webfont + IE的问题。目前我的解决办法有点不太优雅：我使用jquery的$(window).load来通过调整元素的padding值1px来解决，然后IE就能正确地重新绘制字体了。

- simohell

Answer 2

当你比较在FireFox和IE中计算出来的内容时，你可以看到哪里有问题。

在IE中，h2元素的padding-bottom属性为4px。 当我取消这个属性时，它对我来说看起来很好。

由于愚蠢的声誉限制，我无法在这里上传图片，但我希望我描述得足够清楚...

- DavidVollmers

---

我也可以取消文本装饰属性，这样看起来就很好了。我猜这是因为IE正在重新渲染元素。在CSS中更改padding-bottom的值并没有改变任何东西。 - uruk

但是实际上，由于各个浏览器的CSS并不相同，可能会出现更多的差异。我建议逐个比较所有属性，并进行尝试和错误，直到找到正确的配置。 - DavidVollmers