Рассчитать высоту контейнера после загрузки файла шрифта - PullRequest
Новая
       6

Рассчитать высоту контейнера после загрузки файла шрифта

4 голосов
/ 28 декабря 2011

Для создания веб-стиля нестандартным шрифтом с использованием @font-face требуется, чтобы браузер сначала загрузил файл шрифта (так же, как он загружает другие ресурсы, например CSS, JavaScripts и т. Д.), Прежде чем произойдет реальное воспроизведение.

Это создает проблему в Chrome (v16.0.912.63) и Safari (v5.1.2), когда jQuery .height() пытается вычислить высоту своего контейнера. Высчитанная высота равна до , когда шрифт заканчивает загрузку . Рассмотрим следующее (представление: рабочий пример ): 

/* CSS */
h1 {
  font-family: MuseoSlab-500, "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* MuseoSlab-500 is defined using @font-face. */
}

/* HTML */
<div id="box">
  <h1>This is my long header. What do you think? How about now?</h1>
</div>

/* JavaScript */
$(function() {
  alert("The height of the above <div> = " + $('div#box').height());
});

Однако Firefox (v8.0.1) может рассчитать правильную высоту, т. Е. После того, как текст отрисован с использованием нестандартного шрифта.

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

Использование $(window).load() работает, но это подразумевает ожидание, например, все изображения, чтобы закончить загрузку, а также; это сильно тормозит.

Ответы [ 2 ]

3 голосов
/ 28 декабря 2011

вы можете попробовать использовать загрузчик веб-шрифтов, предоставляемый google

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

Когда вы обрабатываете веб-шрифты с помощью этого метода, вы можете указать некоторые обратные вызовы JavaScript: в вашем случае вам нужноукажите fontActive обратный вызов

fontactive (fontFamily, fontDescription)

Вызывается, когда заканчивается загрузка каждого запрошенного веб-шрифта.Параметр fontFamily - это имя семейства шрифтов, а fontDescription представляет стиль и вес шрифта.

Обратите внимание, что вы можете загружать веб-шрифты с любого сайта, необязательно из Google, как четко объяснено вэта страница

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

3 голосов
/ 28 декабря 2011

Я думаю, что $(window).load() - единственный способ справиться с тем, о чем вы говорите. Если ваша страница загружается слишком медленно, возможно, вам нужно оптимизировать изображения или даже загрузить их после загрузки страницы.

...