Как узнать, когда был применен font-face

В настоящее время я создаю корпоративный веб-сайт для клиента, который широко использует пользовательские шрифты.

В JQuerys DOM-ready я делаю расчеты размещения, чтобы выяснить, где некоторые всплывающие меню с динамической шириной и высотой должны быть размещены на основе их динамического содержимого.

Эти вычисления не выполняются, так как DOM-ready запускается до применения font-face, и, следовательно, ширина и высота неверны.

Прямо сейчас (для прототипа) я делаю вычисления через 500 мс после DOM-ready, чтобы облегчить эту проблему, но это не может быть запущено в производство по понятным причинам.

Проблема наблюдалась в последних версиях Firefox и Chrome. IE 8, похоже, не имеет проблемы, но затем DOM-ready срабатывает довольно поздно, так что задержка вроде бы встроена, я думаю:)

Ожидание события загрузки не вариант, поэтому мой вопрос к вам таков:

Существует ли надежный кросс-браузерный способ определения времени применения font-face?

Источник

2 ответа

Решение

Я нашел решение после удивления, почему IE не страдает от этой проблемы.

Firefox и Chrome/Safari запускают DOMContentLoaded событие до применения font-face, что вызывает проблему.

Решение состоит в том, чтобы не слушать DOMContentLoaded но вместо этого иди в старшую школу и слушай onreadystatechange и ждать, пока document.readyState === 'complete' который всегда срабатывает после применения font-face (насколько я могу судить по моим тестам) - что, конечно, всегда происходит в IE, поскольку он не поддерживает DOMContentLoaded,

Так что в принципе вы можете свернуть свое собственное событие в jQuery под названием fontfaceapplied - может быть, это должно быть встроено;)

document.onreadystatechange = function() {
    if (document.readyState === 'complete') 
        $(document).trigger('fontfaceapplied');
};

Забавный факт: Opera все делает правильно и ждет срабатывания DOMContentLoaded пока не применяется font-face.

Источник

Обновление ES6:

Этот вопрос был опубликован много лет назад, когда IE версии 8 и ранее были еще живы, и даже Ecmascript версии 6 не был выпущен, но теперь вы можете писать обратные вызовы на document.fonts События. например:

document.fonts.onloadingdone = () => {
  // do something after all fonts are loaded
};

Для получения дополнительной информации см. Этот пост.

Источник

Установка функции для запуска после тайм-аута 200 мс решает эту проблему при использовании Google Fonts.

Есть заметный скачок, но обычно для вещей одинаковой высоты, для пуристов это может быть не идеально, но он работает в разных браузерах.

Источник
Другие вопросы по тегам