DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 使用icon fonts來輔助CSS處理圖片
使用icon fonts來輔助CSS處理圖片
編輯: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復制內容到剪貼板
  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復制內容到剪貼板
  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. /** 字體圖標出現鋸齒的問題: */
  9. -webkit-font-smoothing: antialiased;
  10. -moz-osx-font-smoothing: grayscale;
  11. }

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

CSS Code復制內容到剪貼板
  1. .icon-bell:before {
  2. content: "\003432";
  3. }
  4. .icon-search:before {
  5. content: "\003433";
  6. }
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved