使用Google的WebFontLoader脚本

https://github.com/typekit/webfontloader

WebFontLoader的 fontactive 回调等效于img元素的 onload .

WebFontLoader's fontactive callback is the equivalent of the img element's onload.

WebFontLoader完全正确，并且WebFontLoader由Adobe自己维护(TypeKit！)-因此，该CDN链接消失的可能性很小.

WebFontLoader is exactly on point and WebFontLoader is maintained by Adobe itself (TypeKit ! )--so it's very unlikely that this CDN-link will vanish.

虽然我建议使用WebFontLoader，但您可以通过检测元素的宽度何时更改(更改的宽度==字体已加载)来自己破解 font.onload .

While I recommend WebFontLoader, you can hack together a font.onload yourself by detecting when the width of your element changes (changed width == the font has loaded).

Adob​​e已创建 Adob​​e Blank 字体，用于测试加载字体时的目的.AdobeBlank以零宽度开始.Ken Lunde博士在此有用的TypeKit博客文章中概述的方法如下，将AdobeBlank用作 font.onload :

Adobe has created the Adobe Blank font for the purpose of testing when a font has loaded. AdobeBlank starts out with zero width. Here's how to use AdobeBlank as font.onload as outlined by Dr. Ken Lunde in this useful TypeKit blog post: http://blog.typekit.com/2013/03/28/introducing-adobe-blank/

1. 将Adobe Blank作为数据URI包含在CSS文件中.

1. Include Adobe Blank as a data URI in the CSS file.

在CSS规则中为某些包含文本的DOM元素(在使用常规字体呈现时宽度为非零)中指定'font-family:SomeWebFont，"Adob​​e Blank".一个示例是绝对位于屏幕外的元素.

Specify ‘font-family: SomeWebFont, "Adobe Blank" in the CSS rule for some DOM element that contains text (and would therefore have a non-zero width when rendered using a regular font). One example would be a element that is absolutely positioned offscreen.

检查DOM元素的宽度.如果为零，则表示尚未加载SomeWebFont.如果大于零，则为零.

Check the width of the DOM element. If it’s zero, SomeWebFont hasn’t loaded yet. If it’s greater than zero, it has.

祝您的项目好运！