Точная ширина элемента при использовании font-face в Chromium

Question

Привет, случайный посетитель Stackoverflow - Спасибо, что прочитали мой вопрос!

Вот минимальная страница, которая демонстрирует мою проблему: http://lisperati.com/text_bug/text_bug.html

Если вы посетите эту страницу с Chrome / Chromium, она будетрассчитать ширину div, содержащего текст, сразу и через 1 секунду.На моих машинах я получаю два совершенно разных ответа по ширине.Есть ли вероятность, что вы знаете причину, по которой эти два вычисления ширины дают разные результаты?

Мое необразованное предположение состоит в том, что существует некоторая странная задержка при рендеринге элементов шрифтового лица, либо из-за задержки загрузки файла, либо из-за других причин.(Хотя мои тесты показывают, что эта проблема не связана с извлечением файла шрифта) Как правило, я понимаю, что динамические элементы, вставленные в DOM, будут правильно размещены, как только вставка будет завершена, и управление будет возвращеноjavascript code.

Для меня важнее, чем понять, «почему» это происходит, понять, как правильно подстроиться под эту проблему.Как вы, вероятно, знаете, элементы IMG имеют событие «onload», которое можно использовать для определения точных размеров изображения после его загрузки.Есть ли какое-либо подобное событие, которое можно использовать, когда элемент font-face был полностью размечен, чтобы приспособиться к этой проблеме?Есть ли у вас какие-либо другие советы о том, как получить точную ширину элемента, стилизованного с помощью font-face, без просто произвольной задержки в 1 секунду?

Большое спасибо за любые советы по поводу этого сбоя, который удерживает мою работуТоварищ, читатель StackOverflow!

Кстати, я недавно задал связанный вопрос (http://stackoverflow.com/questions/4636079), но значительно сузил проблему, что привело к новому, более конкретному вопросу.

Answer 1

Это определенно проблема, и она не может быть решена с помощью загрузчика шрифтов Google

http://code.google.com/apis/webfonts/docs/webfont_loader.html

Потому что это не работает в Safari.Было бы неплохо выяснить, почему, потому что на данный момент нет точного способа считывания ширины и высоты контейнера в сочетании с @ font-face, кроме добавления задержки после события document.ready.Но добавление задержки все еще остается догадкой и в конечном итоге является плохим решением.

Answer 2

Была также та же проблема. Испытывал Google Webfont Loader, как и предыдущие упомянутые плакаты.

Но я обнаружил 2 проблемы:

• Вроде раздражает, что нужно подождать до шрифтазагружается, потому что это вызывает «всплывающее окно» при загрузке страницы и переключении шрифтов.
• Работает на всех браузерах (Последний Chrome, Firefox, IE9, Opera) , кроме Safari .Не знаю почему.

Answer 3

Была такая же проблема, я сходил с ума, пытаясь выяснить, почему мои значения ширины div были отключены.Google font loader сделал свое дело, просто вызвал все мои функции измерения div после того, как событие загрузчика «fontactive» появилось.Работал отлично.

Answer 4

Я нашел частичный ответ, проведя еще какое-то исследование ...

Ключевым моментом здесь является выяснение, когда шрифт шрифта-лица на 100% активен и загружен, прежде чем создавать динамические элементы и проверятьих ширина.Один из способов сделать это, который, кажется, работает хорошо, - это использовать Google Webfont Loader (http://code.google.com/apis/webfonts/docs/webfont_loader.html)) и поместить код динамической генерации в событие «fontactive». Когда все выполнено таким образом, кажется, что ширина текста надежно корректна в любом случае.браузеры, которые у меня есть каждый раз, без произвольной задержки.

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

Answer 5

Вы пробовали document.ready, window onload?

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