logo标签列表

如何检测base-64编码的网页字体的“onload”事件？

javascriptajaxdomonload
3

如何访问 DOM 以检测页面的Web字体何时加载？

我将29个ttf字体编码为单个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;
}
你有一个例子可以举吗？ - James Khoury
1
@James - 我发布了我正在使用的副本。 - Brandon Lebedev
2个回答
0

Google 的 WebFont Loader 解决了这个问题。使用 自定义模块 加载 CSS，然后使用任何一个六个 JavaScript 回调事件来指示字体何时已加载或加载失败。

我已测试此方法。它适用于 base64 编码字体和常规链接字体。

*对于非 JavaScript 回退，请确保在使用 Google WebFont Loader 时在 HTML 中包含重复的 CSS 样式表链接。

0
首先，我会注释掉ST1.style.cssText = "height:0px;text-indent:-9999px;visibility:hidden";这一行，以确保它被正确地写入页面。
假设这样可以解决问题（虽然可能不是最好的解决方案），那么就在<span>标签后添加一个<script>标签。
"<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，我会通过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);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接