Google Font API使用教程

Google在不久前推出了自己的Google Font API服务，下面让我们来看看什么是Google Font API，以及我们如何将它应用到Web设计中。
谷歌字体API为何物？
大家都经常上网，你们是否有看到过一些网站或博客上使用的非标准字体呢？所谓非标准字体是指除了互联网安全字体，如Arial, Helvetica, Verdana, Georgia, Times New Roman之外的其他所有字体。
谷歌字体API就是一个支持高质量的开源字体文件的服务，你可以轻而易举地在自己的网站设计中使用这些字体。该字体库还会不断发展，将会有越来越多的字体类型可供你选择。
使用谷歌字体API的好处
1、可继续使用HTML文本
与使用图片或CSS背景图片不同，使用@font-face方案来美化web排版对 搜索引擎更加友好。
此外，它属于不冒犯性的解决方案，意味着说你不需要对现有的任何内容进行修改，只需要更新 CSS样式即可。
2、可通过互联网访问
由于你使用 HTML文本而不是一个图片或CSS背景，因此并不影响通过屏幕阅读的用户。
3、减轻你的服务器负担
使用@font-face字体，你可将服务器负担转到谷歌安全可靠的CDN设备中，减轻了你自己服务器的工作量，而通过谷歌服务器你完全可以不必担心这些字体文件的加载速度。
下面是使用谷歌字体API的基本过程:
第一步: 添加所需字体的样式链接
你可以查看字体库来查看可用字体。在你的网站上加入某种字体的基本格式是这样的:
第二步: 使用该字体给HTML元素定义式样
下面的例子，是通过使用 font-family CSS属性给元素分配一个叫做“ Font Name” 的字体。
第三步: 始终有个备份方案
上面的代码你可能也发现了我使用了arial,serif 来作为后备的字体，这样做是为了以防万一。 也就是说万一谷歌的服务器出现什么状况，浏览器将会使用默认的arial,Serif字体。 建议在使用font-family 属性时，无论是否是 @font-face字体，都养成这样的习惯，这通常叫做字体的堆叠。
使用谷歌字体API的实例：
接下来我们来介绍一个例子，我建议你在不同的浏览器上测试HTML文件可能会发现跨浏览器的差异。这里使用的字体是 Lobster，你可以使用不同的字体来试验：
代码：

前台：



上图是谷歌Chrome 5.x浏览器查看的效果截图。可以从图中看到，好象是不支持中文字体。
请求使用谷歌字体API中的多种字体
我们假设你需要谷歌字体目录中的三种字体。请不要创建多个请求。创建多个请求会增加一个页面的HTML请求数量，大家应该都知道 HTTP请求的次数越少，页面响应时间就越少。
所以我们不使用多个样式链接标签，而是使用下面的格式。
下面的例子URL请求中，将会一次性加载三种字体(Lobster, Yanone和 Droid Sans)。
http://fonts.googleapis.com/css?family=Lobster|Yanone|Droid+Sans
这样你就可以在你的式样元素中使用这三种字体中的任何一种字体了。
注意事项
字体名称之间用 | 隔开，并且不留空格，还要注意Droid Sans字体的使用，对于字体名称中有空格的，需用 + 符号来代替空格。
提示:在一次链接请求中使用过多的字体可能会让你页面响应时间加长，因此建议只加载必要的字体。虽然说使用这些字体都是免费的，但是也不是说你可以胡来。
Google Font API字体的重量和式样：
互联网字体有字体重量/式样（ font weight/style）变体，如需使用这些变体，只需在该字体的后面加上冒号(:)以及对应的weight/style即可。
下面的例子，我们请求使用 Lobster的粗体、粗斜体以及Inconsolata的斜体。
http://fonts.googleapis.com/css?family=Lobster:bold,bolditalic|Inconsolata:italic|Droid+Sans
每种字体的变体也有短代码（简码）可用，它们分别为:
粗体: b
斜体: i
粗斜体: bi
下面就是使用简码的例子：
http://fonts.googleapis.com/css?family=Lobster:b,bi|Inconsolata:i|Droid+Sans
注意事项
字体后面的冒号与变体名称（如， bolditalic）或变体名称的简码（如，bi）之间不能有空格，如果需要使用到多种变体，请用(,) 将它们隔开，并且也不留空格。
Google Font API的优势
Google Font API是一种能够简单的自定义Web字体的解决方案，只需要一段代码，你就可以Google字体库里导入你所需的Web字体。Google Font API能够在绝对大多数的浏览器中使用，在Google字体库里也有很多时尚和个性化的字体供你选择，并且由于是开源字库，所以不管是商业或者个人，Google Font API都适用。
Google Font API并不依赖于JavaScript，因此即使用户禁用了JavaScript，Google字体依然可以显示。Google字体在CSS 3中的表现同样出色，任何额外的样式都可以被添加，比如CSS 3中的text-shadow属性。
Google Font API的局限性
◆尽管在Google字体库里有一些字体是不错的选择，但这种选择有相当有限的。
◆绝大多数浏览器在字体渲染前，就会加载剩余的页面，这可能会留下一个空白。
◆Google Font API并不支持移动浏览器，例如在iPhone、iPad或者Android里并不适用。
Google Font API：http://code.google.com/webfonts