欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解CSS中iconfont的使用

WEB前端開發(fā)   發(fā)布時(shí)間：2015-08-04 16:37:02   作者：佚名   我要評論
這篇文章主要介紹了詳解CSS中iconfont的使用,阿里巴巴的iconfont庫非常有人氣,同時(shí)也介紹了iconfont的一些缺點(diǎn),需要的朋友可以參考下

初識(shí)iconfont

就算我們一開始不懂這個(gè)英文不懂是干嘛的，對于iconfont，英文從后往前讀應(yīng)該叫做：字體圖標(biāo)。這里面已經(jīng)包含兩個(gè)概念，首先必須是字體，第二，就是圖標(biāo)。我們都知道網(wǎng)頁中的字體我們可以控制大小、樣式、變形、拉伸、默認(rèn)字體等屬性，所以這個(gè)iconfont必須是以文字嵌入到樣式中，所以想到的必須是font；既然是圖標(biāo)那么它就必須有一個(gè)路徑來引入進(jìn)來，首先我們一開始想到的img這個(gè)標(biāo)簽，既然又是文字又是圖標(biāo)，我們能想到的就只有這個(gè)@font-facecss3屬性。

還有這個(gè)iconfont后來詞語，并不是一開始就出現(xiàn)的，網(wǎng)頁制作者或者學(xué)者想要叫起來更爽口所賦予的一個(gè)表現(xiàn)層的東西。

所以，當(dāng)我們看見阿里巴巴的iconfont的圖標(biāo)教程如下：

第一步：使用font-face聲明字體

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @font-face {font-family: 'iconfont';   
  2.     src: url('iconfont.eot'); /* IE9*/  
  3.     src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */  
  4.     url('iconfont.woff') format('woff'), /* chrome、firefox */  
  5.     url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/  
  6.     url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */  
  7. }  

第二步：定義使用iconfont的樣式

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .iconfont{   
  2.     font-family:"iconfont" !important;   
  3.     font-size:16px;font-style:normal;   
  4.     -webkit-font-smoothing: antialiased;   
  5.     -webkit-text-stroke-width: 0.2px;   
  6.     -moz-osx-font-smoothing: grayscale;}  

第三步：挑選相應(yīng)圖標(biāo)并獲取字體編碼，應(yīng)用于頁面

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <i class="iconfont">#x33</i>  

效果如下
201584164031426.png (231×108)

但是，Iconfont存在一些弊端：

    瀏覽器將其視為文字進(jìn)行抗鋸齒優(yōu)化，有時(shí)得到的效果并沒有想象中那么銳利。 尤其是在不同系統(tǒng)下對文字進(jìn)行抗鋸齒的算法不同，可能會(huì)導(dǎo)致顯示效果不同。
    Icon Font 作為一種字體，Icon 顯示的大小和位置可能要受到font-size、line-height、word-spacing等等 CSS 屬性的影響。 Icon 所在容器的 CSS 樣式可能對 Icon 的位置產(chǎn)生影響，調(diào)整起來很不方便。
    使用上存在不便。首先，加載一個(gè)包含數(shù)百圖標(biāo)的 Icon Font，卻只使用其中幾個(gè)圖標(biāo)，非常浪費(fèi)加載時(shí)間。 如果是自己制作 Icon Font 以及把多個(gè) Icon Font 中用到的圖標(biāo)整合成一個(gè) Font 也非常不方便。當(dāng)然使用阿里UX矢量圖標(biāo)庫可以解決這個(gè)問題
    為了實(shí)現(xiàn)最大程度的瀏覽器支持，可能要提供至少四種不同類型的字體文件。包括TTF、WOFF、EOT 以及一個(gè)使用 SVG 格式定義的字體。如果是自己制作的話，可能要頭疼死

相關(guān)文章

  • 純CSS3實(shí)現(xiàn)的動(dòng)態(tài)天氣小圖標(biāo)特效源碼

    是一段實(shí)現(xiàn)了各大網(wǎng)站中經(jīng)常出現(xiàn)的動(dòng)態(tài)天氣圖標(biāo)效果的代碼，本款代碼是純CSS3實(shí)現(xiàn)的天氣出太陽，下雨，雷陣雨等動(dòng)畫圖標(biāo)特效代碼，本段代碼適應(yīng)于所有網(wǎng)頁使用，有興趣的朋
    2015-06-16

  • 純CSS3實(shí)現(xiàn)天氣動(dòng)畫圖標(biāo)特效源碼

    這是一款基于純CSS3的天氣動(dòng)畫圖標(biāo)，利用CSS3特性，我們在這里繪制了7個(gè)關(guān)于天氣的圖標(biāo)，并且每一個(gè)圖標(biāo)都有一套代表當(dāng)前天氣的動(dòng)畫特效
    2014-10-20

  • 使用icon fonts來輔助CSS處理圖片

    這篇文章主要介紹了使用icon fonts來輔助CSS處理圖片,在移動(dòng)端網(wǎng)頁的設(shè)計(jì)中使用較多,需要的朋友可以參考下
    2015-07-21

  • CSS3制作ajax loader icon實(shí)現(xiàn)思路及代碼

    用到了兩個(gè)CSS3屬性transform、animation，實(shí)現(xiàn)原理為：transform控制每個(gè)小方塊在Y軸的偏移，rotate控制旋轉(zhuǎn)的角度，scale縮放至原大小的一半，具體祥看下文，希望對大家
    2013-08-25

  • CSS3 icon font完全指南(CSS3 font 會(huì)取代icon圖標(biāo))

    大家都知道現(xiàn)在各個(gè)瀏覽器都支持CSS3的自定義字體(@font-face)，包括IE6都支持，只是各自對字體文件格式的支持不太一樣。那么對于網(wǎng)站中用到的各種icon，我們就可以嘗試使
    2013-01-06

  • 使用css如何制作時(shí)間ICON方法實(shí)踐

    最近我在重新設(shè)計(jì)自己的博客站點(diǎn)，決定用一個(gè)日歷樣式的icon顯示時(shí)間。以前的解決方案一般是用背景圖片，感謝css3，現(xiàn)在我們用css3就能實(shí)現(xiàn)這樣的功能；接下來將為您詳細(xì)介
    2012-11-12

  • z-blog用CSS定義分類RSS訂閱圖標(biāo)

    關(guān)鍵字描述：訂閱 圖標(biāo) 分類 定義 RSS CSS li 隱藏 默認(rèn) span.feed-icon z-blog分類小RSS圖標(biāo)是被<span class=“feed-icon”>包圍的，可以在CSS定
    2009-06-06

  • CSS icon圖標(biāo)之純CSS實(shí)現(xiàn)帶動(dòng)畫效果的天氣圖標(biāo)

    CSS3動(dòng)畫屬性并不是很多，但重點(diǎn)其實(shí)是你怎樣去運(yùn)用它，從簡單的hover狀態(tài)或復(fù)雜的小動(dòng)畫，都可以巧妙的用CSS3動(dòng)畫屬性來實(shí)現(xiàn)
    2016-01-27

最新評論