亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

使用icon fonts來(lái)輔助CSS處理圖片

segmentfault   發(fā)布時(shí)間：2015-07-21 17:24:36   作者：見(jiàn)見(jiàn)   我要評(píng)論
這篇文章主要介紹了使用icon fonts來(lái)輔助CSS處理圖片,在移動(dòng)端網(wǎng)頁(yè)的設(shè)計(jì)中使用較多,需要的朋友可以參考下

由于移動(dòng)端設(shè)備擁有不同分辨率，PPI 等引起的問(wèn)題， 常常需要針對(duì)不同屏幕分辨率來(lái)調(diào)整優(yōu)化，如使用 @2x 圖片， max-width 限制等。
采用 css @font-face 用來(lái)顯示 icon 也不失為一種好辦法。
因?yàn)?icon fonts (字體)是矢量圖形，所以不受分辨率的影響，同時(shí)可以做到完美縮放；當(dāng)然，也可使用在 WEB 端。
優(yōu)點(diǎn)

    文件小
    加載性能好
    支持 css 樣式
    IE6/7 下也支持

缺點(diǎn)

    樣式限制，使用扁平化風(fēng)格
    移動(dòng)端還存在不兼容問(wèn)題 

    少量移動(dòng)設(shè)備和 icon fonts 字符編碼沖突
    FF和 IE9 下跨域問(wèn)題
    性能問(wèn)題

使用方法

    制作字體文件
        可以利用字體工具手動(dòng)制作
        也可以利用在線工具自動(dòng)生成
    在 css 中引用，如下

引入字體文件

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. }  

再定義一個(gè) icon-* 通配我們所有圖標(biāo)的共有 CSS 樣式，

CSS Code復(fù)制內(nèi)容到剪貼板
  1. [class^="icon-"], [class*=" icon-"] {   
  2.   display: inline-block;   
  3.   speak: none  
  4.   font-family: "iconfont";   
  5.   font-size: 16px;   
  6.   line-height: 1;   
  7.   font-style: normal;   
  8.   /** 字體圖標(biāo)出現(xiàn)鋸齒的問(wèn)題： */  
  9.   -webkit-font-smoothing: antialiased;   
  10.   -moz-osx-font-smoothing: grayscale;   
  11. }  

最后是利用 :before 來(lái)注入每個(gè) icon 對(duì)應(yīng)的字體編碼

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .icon-bell:before {   
  2.   content: "\003432";   
  3. }   
  4. .icon-search:before {   
  5.   content: "\003433";   
  6. }  

相關(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)的天氣出太陽(yáng)，下雨，雷陣雨等動(dòng)畫(huà)圖標(biāo)特效代碼，本段代碼適應(yīng)于所有網(wǎng)頁(yè)使用，有興趣的朋
    2015-06-16

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

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

  • 詳解CSS中iconfont的使用

    這篇文章主要介紹了詳解CSS中iconfont的使用,阿里巴巴的iconfont庫(kù)非常有人氣,同時(shí)也介紹了iconfont的一些缺點(diǎn),需要的朋友可以參考下
    2015-08-04

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

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

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

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

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

    最近我在重新設(shè)計(jì)自己的博客站點(diǎn)，決定用一個(gè)日歷樣式的icon顯示時(shí)間。以前的解決方案一般是用背景圖片，感謝css3，現(xiàn)在我們用css3就能實(shí)現(xiàn)這樣的功能；接下來(lái)將為您詳細(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)畫(huà)效果的天氣圖標(biāo)

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

最新評(píng)論