## 21.8.1.引入外部(独立)字体
一般的网页中,通常使用浏览器内部具有的字体——浏览器也通常从操作系统获取可用字体。
但:
我们也可以给浏览器提供额外的字体(就类似提供图片一样),然后我们在网页中就可以引入并使用该字体!。
注:
网上有很多字体,有些免费,有些收费。
具体做法:
```
@font-face{
font-family: “自己给某字体取的名字XXFont”;
src : url(./某字体文件路径);/*跟引入图片一样道理*/
}
某某选择器{
font-family: XXFont, 微软雅黑,宋体.....;
}
```
![](https://img.kancloud.cn/4b/97/4b97fdf025970d0e20f9b197ba338760_647x519.png)
![](https://img.kancloud.cn/d5/b3/d5b3c570b4a15e4e857dbb3357dfc721_609x237.png)
## 21.8.2.使用图标字体
图标字体,其实就是类似前面Webdings字体一样!
某个图标有一个“形状”,然后使用的时候,就可以当做一个“字符”来用。
具体的做法类似这样:
```
```
具体详细的使用制作过程如下:
方式1(图标类方式)
1,到图标网站iconfont.cn上找到自己需要的图标,加入“购物车”。
![](https://img.kancloud.cn/f0/b9/f0b99d800190102c7929918e836dd866_553x454.png)
2,第二步:到购物车中点击“
![](https://img.kancloud.cn/bb/30/bb3060d142f2a0c3a25a1311c2fe2df9_345x86.png)
![](https://img.kancloud.cn/d0/f4/d0f43308781a4fb44778fdda099f5066_272x198.png)
3,第三步:
解压后,找到其中的文件:iconfont.css,放入项目文件夹相关的位置(其他文件其实也可以放入)。
并引入:
```
```
4,第四步:
在网页中使用一个空的行内元素(比如span,i,em等),加上如下class:
```
```
其中,对应图标的class可以从下载的压缩包中的文件“demo_fontclass.html”中查看到。
![](https://img.kancloud.cn/9e/45/9e4559a1fed1025cd5754f476871c64c_479x221.png)
演示代码如下:
![](https://img.kancloud.cn/65/2b/652b2279191e8bd4dcf99aca791b59c6_705x282.png)
效果如下:
![](https://img.kancloud.cn/e9/74/e9741f3733bdf67117d108ad6cbb9eb6_242x153.png)
使用图标字体的第二种方式(unicode方式)!
```
1,还是使用刚才下载的图标字体文件,解压。
2,还是引入刚才的iconfont.css文件:
3,网页中使用一个行内标签(比如span),其中内容为对应图标的unicode编码,并class为“iconfont”
如下所示:
```
具体图标的unicode编码从这里找:
![](https://img.kancloud.cn/14/1f/141f7cec1a68164202768605940739d0_473x172.png)
文件打开如下所示:
![](https://img.kancloud.cn/e9/35/e935fd1c0517704314090b237233edaf_571x320.png)
代码演示如下:
![](https://img.kancloud.cn/f2/93/f293a8fd085d5f922eaac12dc3748f5d_615x62.png)
效果如下:
![](https://img.kancloud.cn/43/d6/43d65adb3f95c29ec2d98eba68e100ee_107x74.png)