## 21.8.1.引入外部（独立）字体 一般的网页中，通常使用浏览器内部具有的字体——浏览器也通常从操作系统获取可用字体。 但： 我们也可以给浏览器提供额外的字体（就类似提供图片一样），然后我们在网页中就可以引入并使用该字体！。 注： 网上有很多字体，有些免费，有些收费。 具体做法： ``` <style> @font-face{ font-family: “自己给某字体取的名字XXFont”; src : url(./某字体文件路径)； /*跟引入图片一样道理*/ } 某某选择器{ font-family: XXFont, 微软雅黑，宋体.....； } </style> ```   ## 21.8.2.使用图标字体 图标字体，其实就是类似前面Webdings字体一样！ 某个图标有一个“形状”，然后使用的时候，就可以当做一个“字符”来用。 具体的做法类似这样： ``` <span class=”iconfont XX图标的class名” ></span> ``` 具体详细的使用制作过程如下： 方式1（图标类方式） 1，到图标网站iconfont.cn上找到自己需要的图标，加入“购物车”。  2，第二步：到购物车中点击“   3，第三步： 解压后，找到其中的文件：iconfont.css，放入项目文件夹相关的位置（其他文件其实也可以放入）。 并引入： ``` <link rel="stylesheet" href="fonts/iconfont.css"> ``` 4，第四步： 在网页中使用一个空的行内元素（比如span，i，em等），加上如下class： ``` <span class=”iconfont 对应图标的class名”><span> ``` 其中，对应图标的class可以从下载的压缩包中的文件“demo_fontclass.html”中查看到。  演示代码如下：  效果如下：  使用图标字体的第二种方式（unicode方式）！ ``` 1，还是使用刚才下载的图标字体文件，解压。 2，还是引入刚才的iconfont.css文件： <link rel="stylesheet" href="fonts/iconfont.css"> 3，网页中使用一个行内标签（比如span），其中内容为对应图标的unicode编码，并class为“iconfont” 如下所示： <span class=”iconfont” >&#xe601;</span> ``` 具体图标的unicode编码从这里找：  文件打开如下所示：  代码演示如下：  效果如下：