HTML谷歌字体服务

最新推荐文章于 2022-08-31 14:14:08 发布

Mr_Nice

最新推荐文章于 2022-08-31 14:14:08 发布

阅读量2.9k

点赞数

近日，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>
 

打开浏览器看一下：

是不是有点意思~呵呵

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

点击右上角的”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>
  
 }

再来看一下：

Mr_Nice

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML谷歌字体服务

近日，google提供了一项新的服务，google在线网页字体服务。这是一个高品质的网页字体集合，同时提供了使用相关的API。对于网页设计师和web开发人员来说无疑是个好消息，从此我们将不需要担心客户机器上是否有我们想要放到网页中的字体啦。谷歌API提供的字体使用起来非常简单，只需要在HTML代码中添加一两行，如下demo：html>head>link href='
复制链接

扫一扫