前端技能 Google Fonts API @font-CSS

Fri, 20 Jun 2025 11:07:41 +0000

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

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

先来看几个例子

<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的修改

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

再来看看效果

是不是很赞啦。

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

实现原理很简单额

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

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

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

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

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

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

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

很好解释的

Tangerine:bold,bolditalic

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

Font on Dapeng Zhang

前端技能 Google Fonts API @font-CSS