HTMer

研究互联网络和电脑应用技术的IT技术网。 (勤奋+智慧→理想)

« 提高Windows7在双核CPU下启动速度的方法Word2010设置默认保存文件格式为doc的方法 »

在网页中使用google字体的方法(Google Font API)

    在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的字体样式,其中蓝色的Tangerine表示我使用的是google的Tangerine字体,你可以根据你的喜好选择你喜欢的google字体(google字体预览网址:http://code.google.com/webfonts

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



欢迎转载,转载请注明:转载自HTMer [ http://www.htmer.com/ ]

本文链接地址:http://www.htmer.com/article/887.htm

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

HTMer , Powered By Z-Blog, 苏ICP备08003082号

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载本站内容必须也遵循“署名-非商业用途-保持一致”的创作共用协议.
HTM|HTML|ASP|PHP|JSP|Mysql|SQL|Dreamweaver|Flash|Fireworks|Photoshop|SEO Copyright www.HTMer.com. Some Rights Reserved. English Version