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

Question

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

Когда я пытаюсь проверить ширину некоторого текста, вызывая .width() из span текст введен, сначала я всегда получаю неправильное значение. Тогда почему я звоню .width() опять же, я получаю правильное значение.

Я добавляю текст, используя .append() тогда я хочу получить ширину этого сразу. Когда я открываю свой файл напрямую через Chrome (не используя Интернет, чтобы попасть на Dropbox.com), он правильно получает значение ширины в 99% случаев. Может ли это быть проблемой загрузки?

Вот пример: https://dl.dropboxusercontent.com/u/98788053/School/test.html

<script>
  $(document).ready(function() {
    $("body").append("<span id=\"element\">Text to measure</span>");
    $("body").append("<div id=\"thewidth\"></div>");
    $("body").append("<input type=\"button\" value=\"Try again\" onclick=\"getWidth();\">");
    getWidth();
  });
  function getWidth()
  {
    $("#thewidth").html($("#element").width()+"px");
  }
</script>

2

jquery custom-font

Источник

user1778856 21 май '13 в 22:16

1 ответ

Другие вопросы по тегам jquery custom-font

user1026459 21 май '13 в 22:19 2013-05-21 22:19 · Answer 1 · 2013-05-21 22:19

`jsFiddle Demo`

Есть разница между document.ready а также window.onload в основном это document.ready из jQuery будет фактически запускаться до полной загрузки изображений (или пользовательского шрифта в вашем случае), потому что DOM технически готов.

Для этой ситуации я бы предложил вам попробовать это:

<script>
window.onload = function(){
  $("body").append("<span id=\"element\">Text to measure</span>");
  $("body").append("<div id=\"thewidth\"></div>");
  $("body").append("<input type=\"button\" value=\"Try again\" onclick=\"getWidth();\">");
  getWidth();
};
function getWidth()
{
  $("#thewidth").html($("#element").width()+"px");
}
</script>

Это почти работает. Есть еще один шаг. Для полной предварительной загрузки шрифта на странице должен быть элемент, который будет запускать загрузку. Он может быть пустым, и этот пример не повлияет на ваш макет:

<span style="font-family: JennaSue;visibility:hidden;"></span>

Из моих тестов вы не можете сделать это из скрипта в голове, это должно быть сделано внутри <body> теги.