.什么是字體圖標

可以看作一種特殊字體，其展示的是圖標，而不再是文字，其擁有字體的特性，比如大小、顏色、透明效果、陰影等，字體圖標加載快、不變形。也可以看作是矢量格式的圖標。

2.字體圖標常用免費資源

（1）iconmoon字體圖標庫：https://icomoon.io/app

（2）阿里iconfont字體圖標庫：https://www.iconfont.cn/

（3）font-awesome字體圖標庫：

3.字體圖標使用步驟

以iconmoon為例

（1）選擇需要的圖標并下載

1）在fonts文件夾下有四種類型的字體文件，每種字體文件兼容瀏覽器的種類不同

a）.tff格式（TrueTypeFont），美國蘋果公司和微軟公司共同開發的，在Windows和Mac操作系統中為默認字體；IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile中的Safari4.2+等瀏覽器支持該字體。

b）.woff格式（Web Open Font Format-Web開放字體格式），是一種網頁所采用的字體格式標準，使用zlib壓縮，文件大小一般比TTF小40%；IE9+、FireFox3.6+、Chrome6+、Safari5.1+、Opera11.1+等瀏覽器支持該字體。

c）.eot格式（Embedded Open Type-嵌入式OpenType ）,微軟設計用來在網頁使用的字體格式，是OpenType字體的壓縮格式，IE專用，IE4+支持該字體。

d）.svg格式（Scalable Vector Graphics-可縮放的矢量圖形），它是一種用XML定義的語言，用來描述二維矢量及矢量/柵格圖形；Chrome4+、Safari3.1+、Opera10+、IOS Mobile中Safari3.2+等瀏覽器支持該字體。

其他字體

e）.otf格式（Open Type Font），Microsoft和Adobe公司開發的，.otf格式比.ttf更為強大，可以把PostScript字體嵌入到TrueType中。

2）字體轉換

https://www.fontke.com/tool/convfont/

（2）字體圖標的引入

1）把字體放到項目的相應位置

將下載解壓后的fonts文件夾放到項目路徑下

2）在html頁面中引入字體

利用CSS的@font-face屬性，引入外部字體；

在style.css文件中有如下代碼，為固定用法，注意url中字體路徑，其它可以不變。

在html的style標簽中引入如下代碼：

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?8l3wc0');
  src:  url('fonts/icomoon.eot?8l3wc0#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?8l3wc0') format('truetype'),
    url('fonts/icomoon.woff?8l3wc0') format('woff'),
    url('fonts/icomoon.svg?8l3wc0#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

3）為元素用該字體

span {
        font-family: "icomoon";
    }

4）為元素添加內容

復制demo.html中需要的圖標，如下，將其作為元素的內容。

<span>?</span> 

（3）新增字體圖標的引入

當利用iconmoon選用字體圖標時，如果有新增的字體圖標需要加入，則需要用到.json文件，如下，在原先選擇的基礎上，再選擇新選擇的字體圖標，然后再下載使用。

嘍大家好，我是作者“未來”，本期分享的內容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變為Web前端高手哦！

志同道合的小伙伴跟我一起學習交流哦！

第二階段 CSS3

19 字體圖標

圖片是有諸多優點的，但是缺點很明顯，比如圖片不但增加了總文件的大小，還增加了很多額外的"http請求"，這都會大大降低網頁的性能的。更重要的是圖片不能很好的進行“縮放”，因為圖片放大和縮小會失真。我們后面會學習移動端響應式，很多情況下希望我們的圖標是可以縮放的。此時，一個非常重要的技術出現了，額不是出現了，是以前就有，是被從新"寵幸"啦。。。這就是字體圖標（ iconfont）

1 字體圖標的優點

可以做出跟圖片一樣可以做的事情，改變透明度、旋轉度，等但是本質其實是文字，可以很隨意的改變色、產生陰影、透明效果等等本身體積更小，但攜帶的信息并沒有削減。

幾乎支持所有的瀏覽器

移動端設備必備良藥……

2 svg格式上傳轉換字體格式

總體來說，字體圖標按照如下流程：

設計字體圖標

假如圖標是我們公司單獨設計，那就需要第一步了，這個屬于U設計人員的工作，他們在illustrator或 Sketch這類矢量圖形軟件里創建icon圖標，比如下圖：

之后保存為svg格式，然后給我們前端人員就好了。

其實第一步，我們不需要關心，只需要給我們這些圖標就可以了，如果圖標是大眾的，網上本來就有的，可以直接跳過第一二步，進入第三步。

上傳生成字體包

當UI設計人員給我們svg文件的時候，我們需要轉換成我們頁面能使用的字體文件，而且需要生成的是兼容性的適合各個瀏覽器的。

推薦網站：icomoon.io

icomoon字庫

icomoon成立于2011年，推出的第一個自定義圖標字體生成器，它允許用戶選擇他們所需要的圖標，使它們成一字型。內容種類繁多，非常全面，唯一的遺憾是國外服務器，打開網速較慢。

推薦網站：iconfont.cn

阿里 icon font字庫

iconfont.cn

這個是阿里媽媽M2UX的一個 icon font字體圖標字庫，包含了淘寶圖標庫和阿里媽媽圖標庫。可以使用AI制作圖標上傳生成。一個字，免費，免費！！

Fontello

fontello.com

在線定制你自己的 icon font字體圖標字庫，也可以直接從 GitHub下載整個圖標集，該項目也是開源的。

Font-Awesome

fortawesome.github.io/font-Awesome

這是我最喜歡的字庫之一了，更新比較快。目前已經有369個圖標了。

3 下載字體圖標

剛才上傳完畢，網站會給我們把UI做的svg圖片轉換為我們的字體格式，然后下載下來就好了當然，我們不需要自己專門的圖標，是想網上找幾個圖標使用，以上2步可以直接省略了，直接到剛才的網站上找喜歡的下載使用吧。

4 復制需要的字體文件

5 復制需要的字體文件

第一步：在樣式里面聲明字體：告訴別人我們自己定義的字體

這段代碼不用記，直接復制即可，如下：

第二步：給盒子使用字體

第三步：盒子里面添加結構

before的方法如下：

注意要加上\斜杠。

span的方法如下：

復制這個小方塊粘貼到span中間，但是什么都看不到，這樣就對了

?

6 追加新圖標字體的方法

追加新圖標到原來庫里面如果工作中，原來的字體圖標不夠用了，我們需要添加新的字體圖標，但是原來的不能刪除，繼續使用，此時我們需要這樣做：

把壓縮包里面的 selection. json從新上傳，然后，選中自己想要新的圖標，從新下載壓縮包，替換原來文件即可

看不懂的小伙伴不要氣餒，后續的分享中將持續解釋，只要你跟著我分享的課程從頭到尾去學習，每篇文章看三遍，一個月后，回過頭來看之前的文章就會感覺簡單極了。

本章已結束，下篇文章將分享《20 滑動門技術及應用》小伙伴們不要錯過喲！

大有學問# #頭條創作挑戰賽#

什么是字體圖標？

在html代碼中是以文字元素的形式出現，但在網頁渲染時卻以圖片的形式顯示的小圖標就叫做字體圖標。

常見形式：地址、電話、登錄窗口的頭像等。

字體圖標與精靈圖對比

字體圖標比精靈圖更為輕量化，在網頁中加載速度更快；

精靈圖在實際使用中，圖片放大或縮小時圖片會失真。

精靈圖是一張多個圖標整合的一個大圖片，后續添加或修改圖標不方便。

注：

雖然字體圖標好處多多，但是它并不能替代精靈圖。

當小圖標形式簡單且個數較少時適合使用字體圖標；

當小圖標形式復雜且個數較多時適合使用精靈圖。

字體圖標哪里來？

icomoon網站：https://icomoon.io/。

阿里iconfont字庫：https://www.iconfont.cn/。

字體圖標使用方法

以icomoon網站為例。

從網站中下載圖標壓縮包：點擊右上角“IcoMoon App”按鈕，進入字體圖標選擇頁面。

選中需要的圖標（選中狀態的圖標，背景顏色會變白且出現黃色邊框）后，個數可以選擇1個，也可以選擇多個。選好圖標后，點擊右下角“Generate Font ”按鈕進入下載頁面。

點擊右下角“download”按鈕進行下載。

解壓下載好的壓縮包。

將解壓好的文件夾整體添加到項目文件夾中，我沒有單獨設置字體文件夾，直接放在素材圖片文件夾了。

打開字體圖標文件夾中style.css，

復制字體聲明到html文件的style樣式中，改變url的圖標文件存放位置。

span標簽中字體樣式需要與字體聲明中樣式保持一致。

在html文件中，span標簽的內容是需要從網站中直接粘貼復制過來使用。在網站下載頁面，鼠標點擊就是選中狀態，直接ctrl+c復制即可。

如此就是完整的字體圖標使用過程。另外有阿里iconfont也可以使用，也是免費的。有興趣可自行了解。

字體圖標代碼示例

<style>
  /* 字體聲明 ：從下載字體圖標的文件夾中style.css文件上復制過來的*/
  @font-face {
    font-family: 'icomoon';
    src:  url('../images/icomoon/fonts/icomoon.eot?49yzcu');
    src:  url('../images/icomoon/fonts/icomoon.eot?49yzcu#iefix') format('embedded-opentype'),
          url('../images/icomoon/fonts/icomoon.ttf?49yzcu') format('truetype'),
          url('../images/icomoon/fonts/icomoon.woff?49yzcu') format('woff'),
          url('../images/icomoon/fonts/icomoon.svg?49yzcu#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  span {
    font-family: 'icomoon';
    font-size: 100px;
    color: antiquewhite;
  }
</style>

好了，今天的學習就到這里了，下回學習CSS三角~