Как установить размер значка шрифта со встроенным элементом перед загрузкой шрифта

У меня есть этот случай. Мне нужен шрифт значка, который находится внутри текста, чтобы он правильно переносился. единственный способ, которым я могу сделать это, - это если я использую   между текстом и значком (я помечаю шрифт awesome), проблема в том, что до загрузки шрифта значок имеет ширину 0px. И это ломает мой макет, написанный на JavaScript. Он вычисляет размер элемента оболочки.

Объяснение для моего случая: у меня есть таблица с липким заголовком и липкими первыми двумя столбцами, поэтому у меня есть 4 таблицы, и мне нужно сопоставить размеры ячеек в каждой таблице, столбцы в заголовках имеют такие значки (?) после текста. Текст должен быть обернут, но иконка не может стоять одиноко в строке. Поэтому я использую   и значок в качестве встроенного элемента, встроенный блок не выравнивается с текстом, поэтому иногда у меня получалась одна строка со значком в конце.

Я не могу использовать flex или table, потому что у меня есть текст, который нужно обернуть, а значок должен быть похож на символ. Я думал о создании другого символа для шрифта до того, как он загрузится, как m, но он не такой широкий, как значок.

Я не могу использовать предварительную загрузку, потому что шрифты имеют разные файлы, и я получаю ошибки (для шрифтов, которые не для этого браузера) в консоли, которые мне не нравятся.

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

html css font-awesome icon-fonts
person jcubic    schedule 15.11.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел способ заставить это работать. Я использую поддельные значки и прячу их при загрузке шрифтов.

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

и я использую API загрузки шрифтов, найденный в этом вопросе Как получить уведомление после загрузки веб-шрифта (поддержка браузера).

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