google font API 使用指南
2013-02-01 16:33 lyw90 阅读(459) 评论(0) 编辑 收藏 举报google font API 使用指南
最近一个客户的网站用了一个非标准的字体，客户要求用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'>
第二部，在需要使用字体的地方用font-family给元素定义样式：
h3{font-family: 'Fontdiner Swanky', arial, serif; }
Ok，现在打开你的页面浏览就可以看到字体变成“Fontdiner Swanky”字体了。
注意，大家看到font-family里面不仅仅只写了一个字体，是因为我要给我们的h3留个备选字体，如果某些原因导致了google font api不能工作，我们的元素也有备选字体。其实我们在平时的页面制作中也应该这样做。
使用google font API 的好处
- 不必使用一些cufon等之类的字体替换，或者背景图替换，减少了页面对服务器的连接数；
- 使用的是google的cdn,而不是服务器上传的字体，减轻了服务器的流量压力；
- 元素里面用的是普通文本，即使没有样式，或者使用屏幕阅读器，都能看到内容。
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'>
上面我们可以看到family后面有三种字体，每个字体之间用“|”隔开，不要有任何空格。第三个字体中间有加号，因为有的字体名字中间有空格，这里需要将空格转换为“+”
字体多种样式：
<link href='http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans' rel='stylesheet' type='text/css'>
上面我们可以看到family后面的字体“Tangerine”后面有个冒号，后面是bold, bolditalic ，这就是字体的样式，加粗，加粗斜体。
注意，这里的每个字体样式之间用“,”(逗号)隔开。
上面的bold, ,bolditalic 等也可以缩写：
斜体：italic可以写为italic或者i；
粗体：bold可以写为bold或者b；
加粗斜体bold italic可以写为bolditalic 或者 bi。
总结
google font api 能够在绝大多数的浏览器里运行，并且不依赖于javascript。它里面的字体都是开源字库，所以，你可以随意的使用。
但是 它也有一定的局限性。目前字体还比较少，不支持中文字体。
如果你有什么问题，欢迎在下面的评论里与我交流。
http://www.xunzou.com/blog/catalog.asp?page=2 转载
