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; ： 没变
• 删除了所有字体 - 真棒 - 没有变化

Answer 1

当您将FireFox中计算的内容与IE中计算的内容进行比较时，您可以看到这里的坏男孩是什么。

在IE中，h2的填充底部属性是4px。 当我取消选中此属性时，它对我来说很好。

由于愚蠢的声誉限制，我不能在这里上传图片，但我希望我描述得足够好......

Answer 2

我也有typotheque webfont + IE问题。 我现在的解决方法有点脏：我使用jquery $（window）.load来调整元素填充1px，然后IE正确地重绘字体。