关注前端开发微信微信号web007007

网页浏览新天地–谷歌字体服务

作者 管理员 发布时间 2012-09-20 11:52 文章分类 HTML5 文章评论 2条评论 阅读次数

近日,google提供了一项新的服务,google在线网页字体服务。这是一个高品质的网页字体集合,同时提供了使用相关的API。对于网页设计师和web开发人员来说无疑是个好消息,从此我们将不需要担心客户机器上是否有我们想要放到网页中的字体啦。

谷歌API提供的字体使用起来非常简单,只需要在HTML代码中添加一两行,如下demo:


<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Tangerine', serif;
font-size: 24px;
}
</style>
</head>
<body>
<h1>Making the Web Beautiful!</h1>
</body>
</html>

效果如下:

网页浏览新天地–谷歌字体服务-WEB前端开发网

是不是有点意思~呵呵

如果你想用谷歌提供的其他字体,同样很简单,你可以先访问这里,选择自己想用的字体,然后单击该字体的右上角的链接,然后选择get the code。例如我想用Lobster这个字体。

网页浏览新天地–谷歌字体服务-WEB前端开发网

点击右上角的”Click to embed Lobster”,进入页面选择get the code 就可以看到相关的引用了。直接替换掉原来的引用即可:


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

另外,在支持css3的浏览器里,我们也可以用css来修饰一下我们的字体,在代码里加入如下一行:


body {

font-family: 'Tangerine', serif;

font-size: 24px;

<span style="color: #ff0000;">text-shadow: 4px 4px 4px #aaa;</span>

}

再来看一下:

网页浏览新天地–谷歌字体服务-WEB前端开发网

是不是很方便?好,就先写到这里,还是读者亲自来体会一下谷歌字体服务带来的乐趣吧!

本文固定链接: http://www.web92.net/723.html | WEB前端开发

该日志由 于2012年09月20日发表在 HTML5 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 网页浏览新天地–谷歌字体服务 | WEB前端开发
关键字: