Question

我有一个毛茸茸的bug已经有几个星期，文本随意地溢出了包含元素。我很确定这不是一个严格的CSS错误，因为它在重新加载时并不一致（大多数时候看起来都很好），正如你在屏幕截图中看到的那样，它确实包装的文本宽度不正确。

澄清它是一个只有探险家的错误（IE 11被使用，我们不关心其他人，因为它是一个内部网）只是间歇性地发生而Chrome根本没有展示它。

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

Dev tools screenshot of problem

感兴趣的事情：不是特定于页面网站上的1个部分，有时会影响标题而段落会影响其他部分。包括文字字幕。

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

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

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

连字符：自动被使用但是有或没有它（将连接回合仍然会破坏段落之外的文本）。

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

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

Answer 1

问题是/使用相同font-family和不同重量/拉伸/样式的@ font-face声明引起的，显然Explorer只要加载该系列的1个字体就会呈现文本（无论什么重量/样式是指定的）。

当完成加载真实字体时，它会纠正文本的显示但是它没有说明它在自动换行方面具有不同的宽度，因此只是缩短/延长现有字体线。

修复方法是为每个权重/样式open-sans-normal, open-sans-bold ...使用唯一的字体系列名称，将触发重新加载或等待应用字体直到全部加载font-observer-api（由于IE没有填充，因此使用了polyfill）

由于我们希望在这种情况下等待所有权重，因此可以使用以下代码

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') });

然后当然将font-family添加到body.fonts-loaded

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

1 个答案: