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

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

30 голосов
/ 13 июля 2011

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

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

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

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

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

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

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

Ответы [ 2 ]

54 голосов
/ 13 июля 2011

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

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

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

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

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

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

1 голос
/ 27 марта 2014

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

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

...