开篇之前，先来几个链接http://www.font-face.com/#google_announcement

对于前端，强大不是一般般般的。

先来看几个例子

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

来看一下效果图

加点css的修改

1
2
3
4
5
body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
  text-shadow: 4px 4px 4px #aaa;
}

再来看看效果

是不是很赞啦。

这种操作，在我们的项目中，还是很必要的，尤其是前端，从美感上讲，我觉得可以跟苹果的ui媲美，没准苹果也是在用这个呢。

实现原理很简单额

1，第一步，引入css，是google字体的css

1
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

2，第二步，在css中使用自己引入的字体，也可以在自己的html代码中调用的

1
2
3
4
CSS selector {
  font-family: 'Font Name', serif;
}
<div style="font-family: 'Font Name', serif;">Your text</div>

如果字体不好看的话，还有很多的字体的，请看这里http://www.google.com/fonts

对于具体的字体的话，可以去这样调用的

1
http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans

很好解释的

Tangerine:bold,bolditalic

Tangerine想要的字体的名字，bold,bolditalic想要得到的字体的样式，如果想要多个话，就是用|进行分割，迫不及待了，试验一下。