浅谈Google Font API实现原理

在上一篇《使用Google Font API让网页的文字更漂亮》文章中，我向大家介绍了如何使用Google Font API来使用Google 字体目录中漂亮的英文字体。从大家的评论中我总结了2个问题：

1.对中文字体大小估计不足，中文字体的大小确实不是一般的大，如果要在Google的开放字体目录中提供完整的中文字体，估计有困难，依据现在的带宽来看，即使可以提供，用户也不愿意的那么长的时间。

2.对Google Font API的实现原理非常的好奇，这句我在下文中要谈的。

@font-face格式

Google Font API的实现得益于浏览器可加载服务器端字体文件的功能。这一功能的使用是通过在样式中定义@font-face属性，关于该属性的说明如下：

@font-face 能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。【微软的IE 5已经是开始支持这个属性，但是只支持微软自有的.eot (Embedded Open Type) 格式，而其他浏览器直到现在都没有支持这一字体格式。然而，从Safari 3.1开始，网页重构工程师已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。】

Google Font API中加载的正是Google开放字体目录中的字体文件，拿Reenie Beanie字体来说，Google定义的方式如下：

@font-face {
  font-family: 'Reenie Beanie';
  src: url('http://themes.googleusercontent.com/font?kit=ljpKc6CdXusL1cnGUSamX_cCQibwlboQP4eCflnqtq0');
}

上面代码中，font-family属性是定义字体的名称，以便随后的样式中使用该字体，src属性则用来定义字体文件的路径，直接在浏览器访问该属性值就可以下载到该字体文件。