首頁 > web前端 > css教學 > iconfont是什麼? css中iconfont實例用法總結

iconfont是什麼? css中iconfont實例用法總結

伊谢尔伦
發布: 2017-06-09 14:33:29
原創
7012 人瀏覽過

iconfont是什麼?

iconfont是什麼? css中iconfont實例用法總結到了今天應該是比較成熟的技術了。 IconFont拆開來看,就是 Icon 和 Font,這樣估計大家應該都能理解是什麼,那兩者結合呢?沒錯,就是 IconFont ~。 利用字型工具把我們平常 Web 上使用的圖形圖示(icons)轉換成 web fonts,就成了 icon fonts,它可以藉助 CSS 的 @font-face 嵌入到網頁裡,用以顯示 icons。因為字體是向量化圖形,它天生具有「解析度無關」的特性,在任何解析度和PPI下面,都可以做到完美縮放,不會像傳統點陣圖, 如:png,jpeg,放大後有鋸齒或模糊現象。下面的文章就是來聊聊iconfont是什麼? css中iconfont實例用法總結實例用法。

iconfont是什麼? css中iconfont實例用法總結

iconfont是什麼? css中iconfont實例用法總結實例用法

#1. 什麼是Iconfont?介紹Iconfont的好處及使用

Iconfont的好處是什麼呢?

自由變化大小

自由修改顏色

可以加入一些視覺效果如:陰影、旋轉、透明度。

相容IE6

上面的幾點是不是完敗原始的icon,缺點也有就是色彩過於單調,是純色的。

下圖是font-awesome的css檔案裡面的部分內容,從名字來看像是icon的定義,但是\f002 \f003這些內容到底什什麼東西呢?使用字型編輯軟體開啟下載下來的字型檔案後你就明白了。

2. iconfont是什麼? css中iconfont實例用法總結字體圖示和各種css小圖示的詳解

iconfont是什麼? css中iconfont實例用法總結

#通常我們是把這些圖形切圖之後做成精靈圖(又叫雪碧圖);

精靈圖的原理:把很多小圖片集合成一張大圖片,然後用設定背景圖的位置來顯示圖片;

精靈圖的優點:減少伺服器的請求次數,降低伺服器壓力;

sprites是一款很好的精靈圖製作工具;

當然還有其他的方法可以製作這些小的圖形,比如上圖中,天貓使用的字體圖標iconfont是什麼? css中iconfont實例用法總結;

字體圖標,顧名思義,就是一種字體,和字體一樣,是矢量的,我們也叫矢量圖標,任意放大縮小,都不會失真;

3. CSS中iconfont是什麼? css中iconfont實例用法總結的使用詳解

就算我們一開始不懂這個英文不懂是乾嘛的,對於iconfont是什麼? css中iconfont實例用法總結 ,英文從後往前讀應該叫做:字體圖示。這裡面已經包含兩個概念,首先必須是字體,第二,就是圖示。我們都知道網頁中的字體我們可以控制大小、樣式、變形、拉伸、預設字體等屬性,所以這個iconfont是什麼? css中iconfont實例用法總結必須是以文字嵌入到樣式中,所以想到的必須是font;既然是圖示那麼它就必須有一個路徑來引入進來,首先我們一開始想到的img這個標籤,既然又是文字又是圖標,我們能想到的就只有這個@font-facecss3屬性。

4. iconfont是什麼? css中iconfont實例用法總結-向量圖示字體的運用

使用icon font來產生圖示相對於基於圖片的圖示來說,有以下的好處:
1.)自由的變化大小
2.)自由的修改顏色
3.)添加陰影效果
4.)IE6也可以支援
5.)支援圖片圖示的其它屬性,例如,透明度和旋轉等等
6.)可以加入text-stroke和background-clip:text等屬性,只要瀏覽器支援

5. 圖示字體(IconFont)製作

圖示字體(IconFont)現在越來越被廣泛使用,大大提高了網頁的多樣化,解決了視網膜螢幕失真的問題。 據說微軟從IE4開始支援的這個私有方法(@font-face),後來W3在CSS2中也引進這個方法,但是後來CSS2.1又被刪除了,真是遺憾。直到CSS3,又一次引入,這真是個好消息。

相關問答

1. #使用阿里 iconfont是什麼? css中iconfont實例用法總結 在安卓微信內不顯示在ios下顯示

# 2. 擴展本機專案中阿里的iconfont是什麼? css中iconfont實例用法總結字體庫,新增圖示字體

3. iconfont是什麼? css中iconfont實例用法總結圖示製作問題

【相關推薦】

1. php中文網免費教學:《CSS 線上手冊》

#2. php中文網免費影片教學:《php.cn獨孤九賤( 2)-css影片教學》

#

以上是iconfont是什麼? css中iconfont實例用法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板