谷歌在线字体(Google Font Directory)API使用详细教程

2010-06-04 11:51:16 作者：不详来源：WordPress啦!

尽管互联网上新的技术和项目层出不穷，但是在过去的一段时间里我们却缺乏丰富而漂亮的互联网字体。虽然传统的字体选择也非常多，但是大多数电脑中安装并支持的却是一些非常固定的字体，随着互联网设计的发展，传统字体已经不能满足需求。

谷歌字体API的登陆

谷歌引入了谷歌字体目录和字体API，这是一个免费的web服务，它允许站长能够轻松、便捷、有效地使用各种个性化字体。作为字体服务（主要有TypeKit， Typotheque）行业的新生力量，相信大家都很想挖掘谷歌字体API的潜力吧？那么就通过这篇文章深入挖掘它的魅力。

网址：http://code.google.com/webfonts

谷歌字体API为何物？

大家都经常上网，你们是否有看到过一些网站或博客上使用的非标准字体呢？所谓非标准字体是指除了互联网安全字体，如Arial， Helvetica， Verdana， Georgia， Times New Roman之外的其他所有字体。

谷歌字体API就是一个支持高质量的开源字体文件的服务，你可以轻而易举地在自己的网站设计中使用这些字体。该字体库还会不断发展，将会有越来越多的字体类型可供你选折。

使用谷歌字体API的好处

可继续使用HTML文本

与使用图片或CSS背景图片不同，使用@font-face方案来美化web排版对搜索引擎更加友好。

此外，它属于不冒犯性的解决方案，意味着说你不需要对现有的任何内容进行修改，只需要更新 CSS样式即可。

可通过互联网访问

由于你使用 HTML文本而不是一个图片或CSS背景，因此并不影响通过屏幕阅读的用户。

减轻你的服务器负担

使用@font-face字体，你可将服务器负担转到谷歌安全可靠的CDN设备中，减轻了你自己服务器的工作量，而通过谷歌服务器你完全可以不必担心这些字体文件的加载速度。

如何使用谷歌字体API

使用谷歌字体API非常简单，你无需成为一个互联网开发的代码高手。你只需在你的网页中从谷歌那里链接一个CSS式样文件并在自己的CSS定义中引用字体名即可。

下面是使用谷歌字体API的基本过程：

第一步：添加所需字体的样式链接

你可以查看字体库来查看可用字体。在你的网站上加入某种字体的基本格式是这样的：

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

第二步：使用该字体给HTML元素定义式样

下面的例子，是通过使用 font-family CSS属性给《h1》元素分配一个叫做“ Font Name” 的字体。

h1 {
font-family: 'Font Name', serif; 
}

如果你只需使用该字体一次，你可以使用内联样式：

<p style="font-family: 'Font Name', serif" >Six Revisions Is Beautiful</p>

第三步：始终有个备份方案

上面的代码你可能也发现了我使用了serif 来作为后备的字体，这样做是为了以防万一。也就是说万一谷歌的服务器出现什么状况，浏览器将会使用默认的Serif字体。建议在使用font-family 属性时，无论是否是 @font-face字体，都养成这样的习惯，这通常叫做字体的堆叠。

使用谷歌字体API的例子

接下来我们来介绍一个例子，请复制并粘贴下面的代码到一个HTML文件里并保存，然后通过浏览器打开它。我建议你在不同的浏览器上测试HTML文件可能会发现跨浏览器的差异。这里使用的字体是 Lobster typeface，你可以使用不同的字体来试验。

<html>
<head>
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
<style>   
  h1 {font-family: 'Lobster', serif; font-size: 48px;}
</style>
</head>
<body>   
  <h1>Six Revisions Is Beautiful!</h1>
</body>
</html>

效果：

上图是谷歌Chrome 4.1浏览器查看的效果截图。

所生成的文本（“Six Revisions Is Beautiful！”）是普通的 HTML文本，你可以给它添加更多式样元素，（例子中，只使用到 h1元素）。

相关热词：在线字体网页字体 Google 字体设计

分享到：

更多...

收藏至我的帐号

教程排行榜: QQ、淘宝、MSN、Skype在线状态代码生成方法; 四个免费的在线LOGO和徽章生成工具; 分享三款免费的在线字体设计工具; 十五个免费在线制作网站标志的工具; IE调试工具：Microsoft SuperPreview for IE(附下载); 18款Wordpress最佳的免费幻灯片画廊插件推荐; 解决eWebEditor编辑器在IE8中不能正常使用的方法; 四款可以整合到网站的网页版即时通信IM插件系统; 国外五款主流的免费网站流量统计工具; 三款字体辨认、查找、生成的免费在线字体应...; 21个可用于网站和博客的免费视频播放器插件; 实用的网站Web表单(包括WordPress插件)在线创建工具; 利用google翻译器制作多语种网站; 十七款用于Chrome的网页设计开发工具扩展; 六款网址代推、收藏与分享按钮工具推荐; WEB开发之调试利器—Firebug应用全介绍

下载排行榜: 基于jQuery的超炫酷的3D切换JS幻灯焦点图特效代码; 半透明立体质感的宽屏flash+xml焦点幻灯代码; 简洁效果多图切换flash幻灯焦点图代码; 带标题和数字导航的JS焦点幻灯特效代码; 适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码; 31款简单实用的CSS+JS下拉菜单脚本; 3D立体效果金字塔环形旋转的flash+xml相册代码; 基于jQuery实现的瀑布流布局列表特效代码; 透明质感上下滑动带小图预览5屏JS焦点图幻...; 超酷的3D摩天轮flash+xml相册幻灯图片代码; 自带多种幻灯效果支持缩略图导航的jquery画...; 能沿多个方向滑动切换的jquery幻灯代码; 可改图片尺寸和张数的flash幻灯轮换代码; 很好看的带缓冲效果CSS下拉菜单导航代码; 基于jquery很有趣的360度全景图片预览特效; 6屏幻灯上下滑动式带缩略图和文字介绍的fla...