Предварительная загрузка шрифтов @ font-face?

Question

Можно ли предварительно загружать или иным образом кэшировать шрифты @ font-face, скорее всего, с помощью javascript, до загрузки страницы, чтобы вы не получили этот ужасный скачок, когда страница наконец загрузится?

Answer 1

У Google есть хорошая библиотека для этого: https://developers.google.com/webfonts/docs/webfont_loader Вы можете использовать практически любые шрифты, а библиотека lib добавит классы в тег html.

Он даже дает вам события javascript, когда определенные шрифты загружены и активны!

Не забудьте отправить ваши файлы шрифтов в сжатом виде! это, безусловно, ускорит процесс!

Answer 2

Недавно я работал над игрой, совместимой с CocoonJS, с DOM, ограниченным элементом canvas - вот мой подход:

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

Я объяснил эту технику немного подробнее в моей недавней статье http://rezoner.net/preloading-font-face-using-canvas,686

Answer 3

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