html - 自定义字体宽度未在 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 文件，as stated here .

非常感谢任何提示或插入解决此问题的正确方向。您可以在此处找到该网站:http://www.claireundgeorge.ch/fr/

编辑:

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

Answer 1

当您将 FireFox 中的计算结果与 IE 中的计算结果进行比较时，您会发现这里有什么问题。

在 IE 中，h2 的 padding-bottom 属性是 4px。当我取消选中此属性时，它对我来说看起来不错。

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