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

【问题标题】：Custom Font Width Not Rendered Correctly in Internet Explorer 11在 Internet Explorer 11 中未正确呈现自定义字体宽度
【发布时间】：2015-07-01 09:00:52
【问题描述】：

在我们的一个网站上，我们使用来自typotheque.com 的字体，方法如下：

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

字体在 Chrome 等设备上正确显示。在 Windows 7 上的 Internet Explorer 11 中，字体被渲染，但它的宽度不正确。似乎文本的宽度是在应用字体之前呈现的。

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

在 Chrome 上，计算字体宽度并正确换行：

我们尝试的其他方法：

我们按照typotheque.com 上的说明进行操作
我们确保将 css 文件链接到 javascript 文件之前，as stated here。

非常感谢任何提示或推动解决此问题的正确方向。你可以在这里找到网站：http://www.claireundgeorge.ch/fr/

编辑：

添加了word-break: break-all;：没有变化
删除了所有令人敬畏的字体：没有变化

【问题讨论】：

你是否使用了规则 - word-break: keep-all;
是的，没有任何改变
我查看了您的样式表，您在加载页面样式之前加载了一堆字体很棒的东西。尝试更改顺序。首先放置您自己的页面样式，特别是应用您的字体的样式。
删除了 font-awesome-stuff，但无济于事
和规则 word-break: keep-all;

标签： html css internet-explorer font-face webfonts

【解决方案1】：

我也有印刷字体 + IE 的问题。我现在的解决方法有点脏：我使用 jquery $(window).load 将元素填充调整 1px，然后 IE 正确重绘字体。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

我也可以取消选中 text-decoration-property 然后它看起来不错。这是（我认为）由于 IE 正在重新渲染元素这一事实。在 CSS 中更改 padding-bottom 的值不会改变任何内容。
但事实上，您的 css 在每个浏览器中都不相同，因此可能存在更多差异。我会比较所有道具并尝试和错误，直到找到合适的道具。