如何在加载字体之前使用内联元素设置字体图标的大小
How to set size of font icon with inline element before font is loaded
我有这个案例。我需要文本内部的图标字体，以便正确包装。我能做到这一点的唯一方法是，如果我在文本和图标之间使用 （我用很棒的字体标记），问题是在加载字体之前，图标的宽度为 0px。它破坏了我用 JavaScript 编写的布局。它计算包装元素的大小。
对我的情况的解释，我有 table 粘性 header 和粘性前两列，所以我有 4 tables 并且我需要匹配每个单元格的大小table，header 中的列在文本后有这样的图标 (?)。文字要换行，图标不能孤单。所以我使用 和图标作为内联元素，inline-block 不与文本对齐所以我有时会在最后得到带有图标的单行。
我不能使用 flex 或 table，因为我有文本需要换行，图标必须像字符一样。我考虑过在像 m 这样加载之前为字体创建不同的字符，但它没有图标那么宽。
我无法使用预加载，因为字体有不同的文件，我会在控制台中遇到我不喜欢的错误（对于不适用于该浏览器的字体）。
<table><thead>
<tr>
<!--...-->
<td>Some text <i class="fa fa-circle"></i></td>
<!--...-->
</tr>
</thead></table>
我找到了一种方法来完成这项工作。我使用假图标并在加载字体时隐藏它们。
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');
});
我有这个案例。我需要文本内部的图标字体，以便正确包装。我能做到这一点的唯一方法是，如果我在文本和图标之间使用 （我用很棒的字体标记），问题是在加载字体之前，图标的宽度为 0px。它破坏了我用 JavaScript 编写的布局。它计算包装元素的大小。
对我的情况的解释，我有 table 粘性 header 和粘性前两列，所以我有 4 tables 并且我需要匹配每个单元格的大小table，header 中的列在文本后有这样的图标 (?)。文字要换行，图标不能孤单。所以我使用 和图标作为内联元素，inline-block 不与文本对齐所以我有时会在最后得到带有图标的单行。
我不能使用 flex 或 table，因为我有文本需要换行，图标必须像字符一样。我考虑过在像 m 这样加载之前为字体创建不同的字符，但它没有图标那么宽。
我无法使用预加载，因为字体有不同的文件，我会在控制台中遇到我不喜欢的错误（对于不适用于该浏览器的字体）。
<table><thead>
<tr>
<!--...-->
<td>Some text <i class="fa fa-circle"></i></td>
<!--...-->
</tr>
</thead></table>
我找到了一种方法来完成这项工作。我使用假图标并在加载字体时隐藏它们。
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');
});