Как узнать, когда применяется шрифтовая грань

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

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

Эти вычисления терпят неудачу, так как DOM-ready запускается до того, как применяется шрифт, и поэтому значения ширины и высоты неверны.

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

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

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

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

Ответ 1

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

Firefox и Chrome/Safari запускает событие DOMContentLoaded перед применением шрифта, что вызывает проблему.

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

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

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

Забавный факт: Opera делает это правильно и ждет, чтобы вызвать DOMContentLoaded до тех пор, пока не будет применена функция font-face.

Ответ 2

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

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