冰剑'blog

最近一个客户的网站用了一个非标准的字体，客户要求用google font API来替换这个非标准字体。由于之前没有做过这个，就上google上找了找网站，现将使用方法分享给大家。

google font API 是什么呢？

google font API 是google推出的一款支持高质量的开源字体文件的服务。

网站地址：http://code.google.com/apis/webfonts/

字库地址：http://www.google.com/webfonts

怎样使用google font API ?

第一步：在你的html页面里面像添加普通样式表一样，添加字体的样式连接。这里以“Fontdiner Swanky”字体为例：

<link href='http://fonts.googleapis.com/css?family=Fontdiner+Swanky' rel='stylesheet' type='text/css'> 

<link href='http://fonts.googleapis.com/css?family=Fontdiner+Swanky' rel='stylesheet' type='text/css'> <br/>

第二部，在需要使用字体的地方用font-family给元素定义样式：

h3{font-family: 'Fontdiner Swanky', arial, serif; }

h3{font-family: 'Fontdiner Swanky', arial, serif; }<br/>

Ok，现在打开你的页面浏览就可以看到字体变成“Fontdiner Swanky”字体了。

注意，大家看到font-family里面不仅仅只写了一个字体，是因为我要给我们的h3留个备选字体，如果某些原因导致了google font api不能工作，我们的元素也有备选字体。其实我们在平时的页面制作中也应该这样做。

使用google font API 的好处

1. 不必使用一些cufon等之类的字体替换，或者背景图替换，减少了页面对服务器的连接数；
2. 使用的是google的cdn,而不是服务器上传的字体，减轻了服务器的流量压力；


3. 元素里面用的是普通文本，即使没有样式，或者使用屏幕阅读器，都能看到内容。

google font API 的其它用法

上面只是介绍了google font API的一个普通的用法，如果有一个以上的字体呢？并且字体还有bold，italic等属性，当然google也考虑到了，下面介绍一些复杂的用法。

多种字体：

<link href='http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans' rel='stylesheet' type='text/css'> 

<link href='http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans' rel='stylesheet' type='text/css'> <br/>

上面我们可以看到family后面有三种字体，每个字体之间用“|”隔开，不要有任何空格。第三个字体中间有加号，因为有的字体名字中间有空格，这里需要将空格转换为“+”

字体多种样式：

<link href='http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans' rel='stylesheet' type='text/css'> 

<link href='http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans' rel='stylesheet' type='text/css'> <br/>

上面我们可以看到family后面的字体“Tangerine”后面有个冒号，后面是bold, bolditalic ，这就是字体的样式，加粗，加粗斜体。

注意，这里的每个字体样式之间用“,”(逗号)隔开。

上面的bold, ,bolditalic 等也可以缩写：

斜体：italic可以写为italic或者i；
粗体：bold可以写为bold或者b；
加粗斜体bold italic可以写为bolditalic 或者 bi。

总结

google font api 能够在绝大多数的浏览器里运行，并且不依赖于javascript。它里面的字体都是开源字库，所以，你可以随意的使用。

但是 它也有一定的局限性。目前字体还比较少，不支持中文字体。

如果你有什么问题，欢迎在下面的评论里与我交流。