Javascript: когда применяется шрифт?

Question

У нас есть приложение, где:

• Применить шрифта лицо Lato к телу
• нужно вычислить offset().top значение некоторых элементов (для прокрутки-шпиона)

Теперь вычислим значение offset().top в функции Angular link, которая должна быть вызвана после готовности DOM.

Однако мы обнаружили, что значения являются неточными. Если мы отключим шрифт Lato, значения вернутся.

Таким образом, мы подозреваем, что в функции link, когда мы вычисляем, шрифт еще не отображается на body, что делает неверным значение offset().

Как мы можем рассчитать только после того, как применяется шрифт?

Я пробовал решение, данное в How to know when font-face has been applied, но не повезло.

Answer 1

Да, у нас была такая же проблема на работе. Мы интегрировали загрузчик webfont, чтобы избежать такого поведения. Я думаю, самый известный из них: https://github.com/typekit/webfontloader (разработано Google и Typekit)

У вас будут события для загрузки шрифтов. Например, «активный», когда все шрифты визуализируются. Вы можете связать обратный вызов JavaScript с этими событиями, чтобы вы могли запускать вычисления после применения шрифтов.