[聊一聊系列]聊一聊iconfont那些事兒

2501207950 發布于2019-08-19 18:44 / 2600人閱讀

摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼從說起要想了解，得從一個新的規則說起。因為用戶沒有安裝的話，我們強制要求顯示也沒有辦法。國內有阿里巴巴的平臺，可以選自己喜歡的圖標導出。

歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：
https://segmentfault.com/blog/frontenddriver

1. 從FONT-FACE說起

要想了解iconfont，得從一個新的css3規則說起。css3中，新增了一種樣式規則，@font-face，這個規則可以用來引入自定義的字體，到客戶端。以前，我們的字體只能聽任客戶端的。因為用戶沒有安裝的話，我們強制要求顯示也沒有辦法。
現在使用@font-face則可以引入在web服務器上存放的字體文件，從而達到，可以使用一些客戶端瀏覽器上不存在的字體，等到瀏覽器去訪問并渲染時，去下載font-face指定的字體。并命名為我們想要的字體。如圖1.1：

圖1.1

上面的自已個h1中使用的，正是我們存在服務端的字體。由于各個瀏覽器的兼容性問題，

1.IE瀏覽器：EOT
2.Mozilla瀏覽器：OTF，TTF
3.Safari瀏覽器：OTF，TTF??，SVG
4.歌劇：OTF，TTF??，SVG
5.Chrome瀏覽器：TTF，SVG

所以，我們需要準備多個格式的不同的字體文件。指代同一份字體。

@font-face {
    font-family: "icons";
    src: url(../font/curiconfont.eot#iefix) format("embedded-opentype"),
         url(../font/curiconfont.woff) format("woff"),
         url(../font/curiconfont.ttf) format("truetype"),
         url(../font/curiconfont.svg?#iconfont) format("svg");
    font-weight: normal;
    font-style: normal;
}

后面的format指代的是墻面的資源是那種格式的。如想更詳細了解，可以百度一下font-face。上面提到的例子可以在github上的hellofontface.html中找到。

2 什么是iconfont

既然font-face可以指定字體文件，那么字體長成什么樣，不就是開發者說的算了么。我們可以描述一個字體，它長成這樣：。其實，話說回來，文字不就是圖像么。人類最早發明文字的時候就是按照圖像來發明的。所以，我們可以把一些字符，描述成圖像。在我們的網頁上，當成圖像來使用。這就是iconfont了。把一些零散的icon做成字體。我們調用文字的時候，渲染出來的就是icon圖像了。

3 iconfont怎么用

我們來拿手機百度首頁的字體做個小例子試試(如圖3.1)，我們新加入一個font-face，起名為myFont，在需要使用這份iconfont的部分，font-family設置為myFont，則這部分區域可以使用上該font文件:

圖3.1
我們看到我們在網頁上寫了一個字符，本來這個字符對應的文字應該是什么都沒有：
但是，我們的iconfont中賦予了這個字符的圖像：，于是，我們將這個字符所在的區域的字體，設置為我們的iconfont文件。于是瀏覽器就渲染出了這個字符在我們的font文件中，對應的圖像。這里要注意一下---- ，是一個字符的html編碼。這個字符在瀏覽器中沒有定義，但是在iconfont中有定義。我們可以使用unicode碼來唯一標識一個字符，將這個字符在我們的文件中畫出來。這樣就可以利用上iconfont了。

4 iconfont怎么做？

既然知道了怎么用，就要開始了解一下，如何制作一個iconfont了。國內有阿里巴巴的iconfont平臺，可以選自己喜歡的圖標導出iconfont。

http://www.iconfont.cn/

如果我們手里有一些圖標，想轉換為iconfont的話，可以直接使在線工具轉換：

http://image.online-convert.com/convert-to-svg

設計師們也可以使用illustrator直接將圖片導出為svg，具體導出方式可以參考如下鏈接：

http://www.w3cplus.com/svg/svg-files-from-illustrator-to-the-web.html

導出單個icon的svg后，可以上傳至阿里巴巴的iconfont平臺，與其他圖標拼合成一張字體文件。(后續會更新一個我們自產的iconfont生成框架)

5 iconfont的利與弊

看到這里，一些同學肯定會問，那我們為什么要用iconfont呢？直接用圖片不就好了。

這里我們分析一下使用iconfont的利與弊

5.1 iconfont的利 5.1.1 iconfont圖像放大后，不會失真。

相信讀者們沒有見過文字在網頁上放大的時候會失真的狀況吧，因為字體是矢量的，字體的描繪只記錄繪制的路徑。而圖片不是，我們如果把一張小圖放大若干倍之后，會發現圖像變得模糊了。因為圖像是基于像素點的描述，放大后，之前圖像的一個像素，被放大為多個像素。自然是會失真的

5.1.2 iconfont節省流量

在圖片清晰度要求越高的情況下，我們的圖片本身就會越大。這樣非常耗費資源，而且，圖像需要的色彩值信息，也會存儲。這樣也極大的浪費了空間。iconfont顏色由css決定，尺寸要求變大的話，則適應性的變大。傳輸的大小不會變大。

5.1.3 iconfont在顏色變幻方面很簡單

試想，如果一個圖標一開始是黑色的hover上去的時候變為藍色的話，如果這個icon是用圖片來實現的話，我們需要在hover的時候，更換背景圖片，如果使用iconfont的話，則可以直接替換icon的color就行。

5.2 iconfont的弊 5.2.1 iconfont不能支持一個圖像里面混入多重顏色

作為文字，是不會出現左邊是紅色右邊是綠色的狀況的。一個文字，是一個整體，統一的顏色。這個顏色就取決于css的color了。所以使用iconfont做圖標的話，最好使用純色的圖標。

5.2.2 iconfont的使用沒有使用圖片那么直接，簡單。

如果單論直接使用的話，圖片還是比較便捷的。

至于自己的網站要不要使用iconfont就看各位了。

本章的例子在github上，需要的同學請自行查看：

https://github.com/houyu01/iconfontsample

GPU云服務器云服務器聊一聊來聊一聊聊一聊去抖聊一聊java內存

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79921.html

[聊一聊系列]聊一聊iconfont那些事兒

摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼從說起要想了解，得從一個新的規則說起。因為用戶沒有安裝的話，我們強制要求顯示也沒有辦法。國內有阿里巴巴的平臺，可以選自己喜歡的圖標導出。歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/fr...

Markxu 2019-08-29 10:57 評論0 收藏0
[聊一聊系列]聊一聊iconfont那些事兒

摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼從說起要想了解，得從一個新的規則說起。因為用戶沒有安裝的話，我們強制要求顯示也沒有辦法。國內有阿里巴巴的平臺，可以選自己喜歡的圖標導出。歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/fr...

Shisui 2019-08-01 15:26 評論0 收藏0
[聊一聊系列]聊一聊百度移動端首頁前端速度那些事兒

摘要：要快，但是我們的服務也必須萬無一失，后續我會分享百度移動端首頁的前端架構設計那么這樣的優化，是如何做到的呢，又如何兼顧穩定性，架構性，與速度呢別急，讓我們把這些優化一一道來。百度移動端首頁的很多就是這樣緩存在客戶端的。歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/fronte...

The question 2019-06-24 17:50 評論0 收藏0
[聊一聊系列]聊一聊移動web分辨率的那些事兒

摘要：會各種折行，樣式錯亂，那么細致如蘋果肯定不允許這種事情發生。又一次變遷蘋果公司在年，推出了新一代的，他們的屏幕都比要寬要大。歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）： https://segmentfault.com/blog/frontenddriver 不同于PC時代，移動web的樣式更加多樣，也由于手機分辨率的碎片化，移動w...

vibiu 2019-08-29 10:58 評論0 收藏0