使用@font-face 和不同权重时，文本在资源管理器中的包含元素外换行

Question

几个星期以来，我一直遇到一个毛茸茸的错误，文本会在某种程度上任意溢出包含元素。我很确定这不是一个严格的 css 错误，因为它在重新加载时不一致（大多数时候看起来很好），正如您在屏幕截图中看到的那样，它确实将文本换行，只是宽度不正确。

澄清一下，这是一个仅限浏览器的错误（使用 IE 11，我们不关心其他人，因为它是一个内部网）只会间歇性地发生，Chrome 根本不会出现。

它出现在页面上的很多元素中，我怀疑它与重载和竞争条件有关。通常它会通过鼠标悬停自行解决，如果没有，它会在使用开发工具检查时自行解决（下面是幸运的屏幕截图）。

Dev tools screenshot of problem

感兴趣的事情：不特定于页面站点上的 1 个部分，有时会影响标题和其他段落文本。包括 text-captions.

一般 css 基于 bootstrap 3。布局主要通过 -col 类.

完成

页面上有一些flexbox（主要在菜单中。截图中显示的部分是纯bootstrap列和行布局）

字体是 open-sans 从自己的服务器加载的。字体加载竞争是最有可能的罪魁祸首。快速测试看起来更好。

hyphens: auto 被使用，但无论有没有它都会发生（连字符回合仍然会打破段落外的文本）。

屏幕截图显示了在这种情况下的相关 DOM 但是我不能真正提供更具体的代码示例，因为问题不包含在某些元素中，而是发生在网站的所有部分，我可以' 真正找到一个通用的样式分母（除了宽度受限的容器和 @font-face 加载的字体）。

它在较小的测试用例中不容易重现，因为它主要（仅？）在加载的浏览器客户端上触发。

Answer 1

问题 is/was 由使用具有相同字体系列和不同 weight/stretch/style 的 @font-face 声明引起，显然资源管理器在加载该系列的 1 种字体后立即呈现文本（没有不管 weight/style 指定了什么）。

它会在完成加载真实字体后更正文本的显示，但是它没有考虑到它在自动换行方面具有不同的宽度，所以只是shortens/lengthens 现有行。

解决方法是为每个 weight/style open-sans-normal, open-sans-bold ... 使用唯一的字体系列名称，将在加载时触发重新包装，或者等待应用字体直到全部使用 font-observer-api 加载（使用 polyfill，因为 IE 没有它）

因为我们想在这种情况下等待所有权重，所以可以使用如下代码

Promise.all([
    new FontFaceObserver('open_sans', { weight: 400 }).load(),
    new FontFaceObserver('open_sans', { weight: 600 }).load(),
    new FontFaceObserver('open_sans', { weight: 700 }).load()
]).then(function () { $('body').addClass('fonts-loaded') });

然后当然要将字体系列添加到 body.fonts-loaded

使用@font-face 和不同权重时，文本在资源管理器中的包含元素外换行

Text wraps outside containing element in Explorer when using @font-face and different weights

css

word-wrap

font-face

internet-explorer-11