google WebFont Loader 源码阅读

资料：

关于新发布的google web font 官方介绍 ,包括三个部分：

get started ：介绍了最简单的直接css引用方法，包括多字体，粗体斜体的打包应用。

WebFont Loader ：面向javascript开发者，通过 自定义事件以及状态css类名的动态添加 提供了细力度的控制字体加载过程，今天主要是研究一下实现这一功能的字体下载js库。

Technical Considerations :介绍了web font的基本原理,并提醒了各个浏览器的差异：firefox会先显示默认字体，待自定义字体下载完毕后再重新渲染为自定义字体，即"flash of unstyled text"，而其他浏览器则表现为自定义字体下载完成前对应字体文字是空白。

w3c 的对应标准

web font历史以及浏览器差异 ：ie选择了具备版权保护功能的eot(Embedded OpenType)字体格式，而其他浏览器则选择了 很开放的OpenType。

WebFont Loader:

 

测试演示

(目前firefox@mac有问题，不解)

 

 

google源代码

core 文件夹内为核心代码

其他个文件夹对应Specifying providers and fonts 部分，每个文件夹内组成一个module的概念

google 文件夹内代码为对应从google服务器下载字体css部分

custom 文件夹内代码对应自定义服务方下载

typekit 文件夹内代码对应从typekit处下载

core/cssclassname.js： 主要是对应 WebFont Loader 部分所讲的css class name生成过程，将字体名间的空格，下划线去掉过程：

webfont.CssClassName.prototype.sanitize = function(name) {
  return name.replace(/[\W_]+/g, '').toLowerCase();
};

 

core/cssfontfamilyname.js: 将围绕字体名的',""统一替换为"

core/domhelper.js: 简单的dom操作，添加元素，修改class，为后续生成link以及字体监控元素做准备，注意点在于：

t.appendChild(e) :

// This is safer than appendChild in IE. appendChild causes random
    // JS errors in IE. Sometimes errors in other JS exectution, sometimes
    // complete 'This page cannot be displayed' errors. For our purposes,
    // it's equivalent because we don't need to insert at any specific
    // location.
    t.insertBefore(e, t.lastChild);

 

core/eventdispatcher.js: 事件分发机制，将库自身需要进行的操作（对html结点添加删除对应状态class）以及用户自定义的状态回调函数进行统一。

core/font.js 为直接调用部分，实现类WebFont，用户调用load方法传入字体配置后，调用对应module创建link结点，下载css字体文件，并启动检测测试字体变化计时器，根据检测结果调用 eventdispatch 处理变化。

core/fontvariationdescription.js： 对各种缩写配置进行标准化转换。

core/fontwatch.js : 同yui2监视字体大小原理一样，fontwatch一开始就对应每个欲加载字体创建一个结点，并计算元素大小：

<span style="position: absolute; top: -999px; font-size: 300px; 
font-family: Tangerine,DEFAULT_FONT; font-style: normal; font-weight: 400;">Mm</span>

 其中 Tangerine是我们要加载的字体，设置定时器监控改元素大小，当大小发生变化时立即转移到 font.js 处理。 注意超时设置5秒。

core/initialize.js: 导入库到全局命名空间

core/namespace.js: 只有一个bind工具函数

core/useragent*.js: 浏览器判断，目前只看到对ie script阻塞问题用到了。

google/FontApiParser.js ：更多对字体控制的标准化转换

google/fontapiurlbuilder.js: 根据用户字体配置构造link引用的url地址参数

google/googlefontapi.js: google module的实现，调用同文件夹其他两个文件，并被 core/font.js调用，主要是再head中增加link元素，开始字体css的下载，注意ie 阻塞问题：

ie等body形成再开始：

if (nonBlockingIe) {
    domHelper.whenBodyExists(function() {
      domHelper.insertInto('head', domHelper.createCssLink(
          fontApiUrlBuilder.build()));
    });
  } else {
    domHelper.insertInto('head', domHelper.createCssLink(
        fontApiUrlBuilder.build()));
  }

 

总结：

  确实不难的问题，简单来作就是插入测试节点，监控变化，调用回调函数。google仍然坚持了完美的架构，分离分离再分离，最终module，watcher,coreapi,event,variation都可以独立变化