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

Question

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

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

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

Dev tools screenshot of problem

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

通用 css 是基于 bootstrap 3 的。布局主要通过 -col 类完成。

页面上有一些flexbox(主要在菜单中，截图中显示的部分是纯bootstrap col和row布局)

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

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

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

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

Answer 1

问题是/是由使用具有相同字体系列和不同粗细/拉伸(stretch)/样式的@font-face 声明引起的，显然资源管理器会在加载该系列的 1 种字体后立即呈现文本(无论粗细/指定样式)。

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

解决方法是为每个粗细/样式使用唯一的字体系列名称 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