Как определить «onload» для веб-шрифтов в кодировке Base-64? - PullRequest
Новая
       10

Как определить «onload» для веб-шрифтов в кодировке Base-64?

3 голосов
/ 29 июля 2011

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

У меня есть 29 .ttf-шрифтов, кодированных в base64 в один файл CSS.У меня также есть скрытый div на странице, которая использует каждый из шрифтов, чтобы браузер считывал каждый из шрифтов в память.Этот процесс требует времени, поэтому мне нужно поставить в очередь событие AJAX для запуска после того, как браузер загрузит каждый из шрифтов в память.

* Я знаю, что document.ready и window.onload подходят близко, но я хочучтобы запустить событие до того, как остальные внешние ресурсы закончат загрузку, чтобы запустить AJAX быстрее.

(jQuery в качестве крайней меры, пожалуйста)

================

Добавлен пример кода:

HTML 

<head>
...
<link type="text/css" rel="stylesheet" href="TTF-embedded-fonts.css" />
<script type="text/javascript" src="load-fonts.js"></script>
</head>

load-fonts.js 

var ST1 = document.createElement('div');
ST1.setAttribute('id', 'fontloader');
ST1.innerHTML = "<span style='font-family:samplefont'>a<b>b<i>c</i></b><i>d</i></span> ... ";
ST1.style.cssText = "height:0px;text-indent:-9999px;visibility:hidden";

window.document.body.onload = appendST1 ();
function appendST1() { document.body.appendChild(ST1) };

[FONT-LOAD HANDLER HERE] { API.Ajax.loadComplete("load-fonts.js") };

TTF-embedded-fonts.css 

@font-face {
    font-family: 'samplefont';
    src: url(data:font/truetype;charset=utf-8;base64,AAAE...) format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'samplefont';
    src: url(data:font/truetype;charset=utf-8;base64,AAAE...) format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'samplefont';
    src: url(data:font/truetype;charset=utf-8;base64,AAAE...) format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'samplefont';
    src: url(data:font/truetype;charset=utf-8;base64,AAAE...) format('truetype');
    font-weight: bold;
    font-style: italic;
}

Ответы [ 2 ]

0 голосов
/ 30 июля 2011

Google WebFont Loader решает эту проблему.Используйте пользовательский модуль для загрузки CSS, а затем используйте любое из шести событий обратного вызова javascript , чтобы сообщить, когда шрифты были загружены и / или не удалось загрузить.

Я проверил этот метод.Он работает для шрифтов, закодированных в base64, и регулярно связанных шрифтов.

* Для резервного копирования не в javscript обязательно включите дублирующую ссылку на таблицу стилей CSS в HTML при использовании Google WebFont Loader.

0 голосов
/ 29 июля 2011

Для начала я бы закомментировал строку ST1.style.cssText = "height:0px;text-indent:-9999px;visibility:hidden";, чтобы убедиться, что она правильно записывается на страницу.

Предполагается, что решение работает (хотя, вероятно, не самое лучшее) - добавить тег <script> после тега <span>. 

"<span style='font-family:samplefont'>1a<b>b<i>c</i></b><i>d</i></span>"
+ "<scrip" + "t type=\"text/javascr" + "ipt\">\n" 
+ "Code Goes here" 
+ "\n</scri" + "pt>"

И я бы добавил его через jQuery, если он у вас есть: 

var ST1 = $("<div><span style='font-family:samplefont'>1a<b>b<i>c</i></b><i>d</i></span><scrip" 
+ "t type=\"text/javascr" + "ipt\">\n" 
+ "Code Goes here" 
+ "\n</scri" + "pt></div>");
$(document.body).append(ST1);
...