關于字體圖標那些事你知道多少?

2018年09月30日 06:47:16益點益滴1821

什么是字體圖標?

簡單的說,就是將一種特殊的字體,通過特定方式,在網頁上像傳統圖片一樣顯示的圖標。如下圖:

1635.jpg

字體圖標(font-icon)通常是將一套圖標集以字體文件的形式封裝,并通過 CSS 的 @font-face 方式作為 Web Font 調用。為了解決不同環境不同瀏覽器的兼容和效率問題,常見封裝文件格式有otf、eot、svg、ttf、woff、woff2等。比較知名的字體圖標庫有Glyphicons(Bootstrap)、Font Awesome(奧森圖標)、Iconfont(阿里巴巴)、IcoMoon等,前兩種是各自統一風格并且所有圖標整體封裝,文件相對較大但使用方便,后兩種則更像是一種平臺,需要自定義選取封裝,按需生成文件在網頁中加載時更有優勢,但更新增減操作稍顯麻煩。

為什么要用字體圖標?

輕量級:一個圖標字體要比一系列的圖像要小。一旦字體加載了,圖標就會馬上渲染顯示,不需要下載一個個圖像。與css sprite技術一樣,可以減少HTTP的請求次數,而且和HTML5的離線存儲配合,可以對性能做出優化。
靈活性:可以像網頁中的文字一樣,通過font-size屬性來對其進行大小的設置,而且還可以添加各種文字效果,如color、hover、background、filter、text-shadow、transform等效果。
兼容性:字體圖標支持現代瀏覽器,甚至是低版本的IE瀏覽器,所以可以放心的使用它。
保真性:相比于傳統圖片放大圖片會出現失真、縮小又會浪費掉像素點,字體圖標因為是矢量格式所以不存在這種情況。

當然了,相對于真正的圖片,它也有一定劣勢,比如字體圖標只能被渲染成單色,或者是CSS3的漸變色;創作圖標字體比較耗費時間,相比制作傳統圖片圖標可能也不會輕松多少,所以后期維護成本也比較高。如果不是商用,那么在拿來主義的指導下,咱們也可以在網上找到很多現成的免費字體圖標使用。

使用字體圖標常見問題?

1,css樣式文件與font字體文件目錄位置不對導致相對路徑引用失敗

一般而言,css目錄與fonts目錄是同級存放,如果發生改變則需要修改css文件中的相對路徑,實在弄不明白相對路徑寫法就用絕對路徑,以自己網站域名http://www.****.com開頭。

2,某些網站服務器空間字體圖標文件格式被限制

比如很多Windows主機的IIS環境默認就不支持.svg、.woff和.woff2后綴的文件,這個與不支持mp3、mp4媒體文件是一樣道理,需要修改IIS環境中的MIME類型配置,添加支持類型讓IIS支持相應文件的訪問即可。也可以修改網站根目錄下的web.config文件添加規則,代碼如下:  

<system.webServer>

<staticContent>

 <remove fileExtension=".woff" />

 <mimeMap fileExtension=".woff" mimeType="font/x-font-woff" /> 

</staticContent>

</system.webServer>

remove和mimeMap可以重復添加以便添加多種文件類型。

3,字體文件遠程跨域引用受限制

遠程引用失敗的情況各不相同,網上也有很多解決方案,但最佳解決辦法還是本地化。

超贊,真給力!嗯,必須鼓勵~

打賞 0

歡迎點評!或反饋疑問...

支持Ctrl+Enter提交
暫無留言,快搶沙發!
賬號:mxy310@163.com[復制]
賬號:77940140[復制]

深切哀悼

抗擊新冠肺炎疫情斗爭犧牲烈士和逝世同胞!

×
M
海南环岛赛彩票奖金