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

发布于,归属于html52个座位已被强势霸占! 共有178人围观    

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

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

 

  1. <html>
  2. <head>
  3. <link href='http://fonts.googleapis.com/css?family='Tangerine' rel='stylesheet' type='text/css'>
  4. <style>
  5. body {
  6. font-family: 'Tangerine', serif;
  7. font-size: 24px;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <h1>Making the Web Beautiful!</h1>
  13. </body>
  14. </html>

打开浏览器看一下:

是不是有点意思~呵呵

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

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

  1. <html>
  2. <head>
  3. <link href='http://fonts.googleapis.com/css?family='Lobster' rel='stylesheet' type='text/css'>
  4. <style>
  5. body {
  6. font-family: 'Lobster', serif;
  7. font-size: 24px;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <h1>Making the Web Beautiful!</h1>
  13. </body>
  14. </html>

打开浏览器看下效果:

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

  1. body {
  2.  
  3. font-family: 'Tangerine', serif;
  4.  
  5. font-size: 24px;
  6.  
  7. <span style="color: #ff0000;">text-shadow: 4px 4px 4px #aaa;</span>
  8.  
  9. }

再来看一下:

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

(如果您喜欢这篇教程,可以通过支付宝打赏我们1元哦,拜谢!)

C#程序员~喜欢新技术,有幸加入RIA团队,I will 努力做到尽善尽美。个人比较热衷MS的Silverlight,希望有一天能从事这方面的开发工作。

辛勤码教程中...求订阅...O(∩_∩)O

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

2个座位已被强势霸占!

  1. 明河共影

    这是银月闪舞的第一篇文章,偶来支持下。

  2. ttgive

    哈哈 支持 支持