如何在加载字体之前使用内联元素设置字体图标的大小

Question

我有这个案子。我需要文本内的图标字体，以便正确换行。我可以做到这一点的唯一方法是，如果我在文本和图标之间使用 （我用字体标记），问题是在加载字体之前，图标的宽度为 0px。它破坏了我用 JavaScript 编写的布局。它计算包装元素的大小。

解释我的情况，我有一个带有粘性标题和粘性前两列的表格，所以我有 4 个表格，我需要匹配每个表格中单元格的大小，标题中的列在文本之后有类似 (?) 的图标.文字需要换行，但图标不能单排。所以我使用  和图标作为内联元素，内联块不与文本对齐，所以我有时会在最后得到带有图标的单行。

我不能使用 flex 或 table，因为我有需要换行的文本，并且图标必须像字符。我考虑过在字体加载之前为字体创建不同的字符，比如m，但它没有图标那么宽。

我不能使用预加载，因为字体有不同的文件，并且我会在我不喜欢的控制台中收到错误（对于不适合该浏览器的字体）。

<table><thead>
    <tr>
      <!--...-->
      <td>Some text&nbsp;<i class="fa fa-circle"></i></td>
      <!--...-->
    </tr>
</thead></table>

Answer 1

我找到了一种方法来完成这项工作。我正在使用假图标并在加载字体时隐藏它们。

table th i::after {
  content: '⌧';
  color: transparent;
}
.fonts-loaded table th i::after {
  content: none;
}

我正在使用在这个问题How to be notified once a web font has loaded 中找到的字体加载 API (browser support)。

document.fonts.ready.then(function () {
  document.documentElement.classList.add('fonts-loaded');
});