萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 使用icon fonts來輔助CSS處理圖片

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

   由於移動端設備擁有不同分辨率,PPI 等引起的問題, 常常需要針對不同屏幕分辨率來調整優化,如使用 @2x 圖片, max-width 限制等。

  采用 css @font-face 用來顯示 icon 也不失為一種好辦法。

  因為 icon fonts (字體)是矢量圖形,所以不受分辨率的影響,同時可以做到完美縮放;當然,也可使用在 WEB 端。

  優點

  文件小

  加載性能好

  支持 css 樣式

  IE6/7 下也支持

  缺點

  樣式限制,使用扁平化風格

  移動端還存在不兼容問題

  少量移動設備和 icon fonts 字符編碼沖突

  FF和 IE9 下跨域問題

  性能問題

  使用方法

  制作字體文件

  可以利用字體工具手動制作

  也可以利用在線工具自動生成

  在 css 中引用,如下

  引入字體文件

  CSS Code復制內容到剪貼板

  @font-face {font-family: 'iconfont';

  src: url('iconfont.eot'); /* IE9*/

  src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

  url('iconfont.woff') format('woff'), /* chrome、firefox */

  url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

  url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */

  }

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

  CSS Code復制內容到剪貼板

  [class^="icon-"], [class*=" icon-"] {

  display: inline-block;

  speak: none

  font-family: "iconfont";

  font-size: 16px;

  line-height: 1;

  font-style: normal;

  /** 字體圖標出現鋸齒的問題: */

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  }

  最後是利用 :before 來注入每個 icon 對應的字體編碼

  CSS Code復制內容到剪貼板

  .icon-bell:before {

  content: "03432";

  }

  .icon-search:before {

  content: "03433";

  }

copyright © 萬盛學電腦網 all rights reserved