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

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

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

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

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

缺點

    樣式限制，使用扁平化風格
    移動端還存在不兼容問題 

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

使用方法

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

引入字體文件

CSS Code復制內(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. }  

再定義一個 icon-* 通配我們所有圖標的共有 CSS 樣式，

CSS Code復制內(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.   /** 字體圖標出現(xiàn)鋸齒的問題： */  
  9.   -webkit-font-smoothing: antialiased;   
  10.   -moz-osx-font-smoothing: grayscale;   
  11. }  

最后是利用 :before 來注入每個 icon 對應(yīng)的字體編碼

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

相關(guān)文章

  • 純CSS3實現(xiàn)的動態(tài)天氣小圖標特效源碼

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

  • 純CSS3實現(xiàn)天氣動畫圖標特效源碼

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

  • 詳解CSS中iconfont的使用

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

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

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

  • CSS3 icon font完全指南(CSS3 font 會取代icon圖標)

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

  • 使用css如何制作時間ICON方法實踐

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

  • z-blog用CSS定義分類RSS訂閱圖標

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

  • CSS icon圖標之純CSS實現(xiàn)帶動畫效果的天氣圖標

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

最新評論