在网页中使用 Google 字体的方法（Google Font API）

作者：来源：HTMer 日期：2011-1-22

在 Google 的网站上，有个 Google Font API 的项目，就是在网页中可以使用 Google 提供的字体，而浏览网页者无须安装字体。这样我们在做网页的时候就可以使用很漂亮的字体了（不过可惜的一点是目前只支持英文字体，不支持中文字体），而不像以前那样为了使用漂亮的字体而不得不把网页中的字做成图片。那么 Google Font API 具体该如何使用呢？今天就向大家介绍在网页中使用 Google 字体的方法。

在介绍 google 字体的具体使用之前，有兴趣的朋友可以先去看下官网的介绍，Google Font API 官网地址：http://code.google.com/intl/zh-CN/apis/webfonts/

下面给出我的一个简单的例子，然后对该例子做个说明，相信是非常简单的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>在网页中使用google字体的方法(Google Font API)</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style type="text/css">
.style1{
font-family:Tangerine;
font-size:48px;
}
</style>
</head>
<body>
<div class="style1">www.htmer.com</div>
</body>
</html>

1、首先引用 Google 字体样式，Google 字体预览网址：http://code.google.com/webfonts

2、在我们的网页中给你需要改变字体的文字添加样式，上面代码中可以看出我给 www.htmer.com 文字定义了一个 style1 的样式，并在样式中直接使用 font-family:Tangerine，这样我们浏览该页面的时候就可以显示 Google 的 Tangerine 字体了，相关截图如下所示：

在网页中使用 Google 字体的方法（Google Font API）

电邮：cftea@126.com