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

Question

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

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

/* 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() работает, но это подразумевает ожидание, например. все изображения для завершения загрузки; он так сильно замедляется.

Answer 1

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

Answer 2

вы можете попробовать использовать WebFont погрузчик предоставленного Google

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

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

fontactive (FontFamily, FontDescription)

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

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

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