## 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編碼從這里找：  文件打開如下所示：  代碼演示如下：  效果如下：