標籤:ie9 控制 ext 檔案 sprite 位移 ota rom size
方法一:
用background製作小表徵圖
像這樣,拿到設計稿後把所有的表徵圖放在一張圖片上,利用background-position、width、height來控製圖標的位置及大小。
代碼:
.icon{display:inline-block;background:url(../images/icon.png);}.icon1{background-position:0 0;width:16px;height:16px;background-repeat:no-repeat;position:absolute;top:6px;right:6px;}.icon2{background-position:-20px 0;width:41px;height:18px;margin:10px;}.icon3{background-position:-29px -41px;width:17px;height:9px;margin-left:10px;}.icon4{background-position:0 -21px;width:62px;height:14px;}.icon5{background-position:-65px 0;width:49px;height:49px;margin-top:5px;}
引用時:
<i class="icon icon1"></i><i class="icon icon2"></i><i class="icon icon3"></i><i class="icon icon4"></i><i class="icon icon5"></i>
優點:
圖片作為背景來顯示表徵圖,表徵圖的效果好,不容易出現鋸齒
缺點:
表徵圖大小及顏色難以控制,特別是調響應式時,大部分適用於pc端網站開發,移動端不建議適用
方法二:
簡單的表徵圖可用css繪製,比如:
<i class="box"> <s class="ico"></s></i>
.box{ display: block; width: 200px; height: 20px; background: gold; overflow: hidden; position: relative; top: 100px; left: 200px;/*控制小三角的位置*/}.ico{ width: 100px; height: 100px; display: block; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); border:5px solid #000 ; position : absolute; top:30px; left:20px;;}
*也可以使用虛擬元素:before/:after輔助繪製
優點:
比上一種方法節省空間的,載入速度快
缺點:
大小不好控制,表徵圖僅限於簡單的,不能完成複雜的表徵圖繪製
方法三:
常用的字型表徵圖,例如像阿里表徵圖、Font Awesome等,以阿里表徵圖為例:
將你想要的表徵圖加入庫,點擊右上方的購物車形狀的表徵圖,彈出如效果:
添加至你需要的項目裡面,然後再到表徵圖管理-》我的項目裡面去把剛下加入的表徵圖下載至本地:
把下載的解壓後,在你的項目裡面建立個fonts的檔案夾,把如下檔案放進去:
在你的樣式檔案中引用改字型表徵圖:
@import url("iconfont.css");
在需要調用這個表徵圖的地方插入html:
<i class="iconfont"></i>
或者這樣
<i class="iconfont icon-zhuye-copy"></i>
優點:
載入速度快,字型大小及顏色方便修改
缺點:
收字型大小的影響,字型表徵圖顯示的效果會有明顯的鋸齒
方法四:
使用SVG。SVG是一種基於XML的圖形格式。這是一種可縮放的向量圖形。SVG是由W3C制定的標準,在2003年成為了W3C的推薦標準。相比較其他的映像格式,SVG的優勢在於:SVG可以被很多工具讀取和修改、SVG的尺寸更小、SVG映像在任何的解析度下都可以高品質地列印。
SVG的使用主要有如下方式:
1.img標籤直接引用
這種方式簡單,直接把SVG格式圖片看作為普通的圖片來引用。這種方式在實際的使用情境中應用不多。
2.內聯方式
IE9、Firefox、Opera、Chrome及Safari都支援內聯的SVG。IE8及以下版本瀏覽器可以通過安裝外掛程式來支援SVG。內聯的SVG直接作為HTML文檔的一部分,不需要單獨請求。內聯的SVG使用上很不方便,如果在HTML中加入大段的SVG代碼,則很難維護,代碼也無法複用。
3.Data URIs
這種方式是把SVG檔案直接轉成base64編碼格式,然後以Data URIs的方式引用。範例程式碼如下:
.icon{ background: url(data:text/svg+xml;base64,<base64 encoded data>)}
4.使用SVG中的<symbol>
元素
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="circle-cross" viewBox="0 0 32 32"> <title>circle-cross icon</title> <path d="M16 1.333q2.99 0 5.703 1.161t4.677 3.125 3.125 4.677 1.161 5.703-1.161 5.703-3.125 4.677-4.677 3.125-5.703 1.161-5.703-1.161-4.677-3.125-3.125-4.677-1.161-5.703 1.161-5.703 3.125-4.677 4.677-3.125 5.703-1.161zm0 2.667q-2.438 0-4.661.953t-3.828 2.557-2.557 3.828-.953 4.661.953 4.661 2.557 3.828 3.828 2.557 4.661.953 4.661-.953 3.828-2.557 2.557-3.828.953-4.661-.953-4.661-2.557-3.828-3.828-2.557-4.661-.953zm3.771 6.885q.552 0 .948.391t.396.943-.396.948l-2.833 2.833 2.833 2.823q.396.396.396.938 0 .552-.396.943t-.948.391-.938-.385l-2.833-2.823-2.823 2.823q-.385.385-.948.385-.552 0-.943-.385t-.391-.938q0-.563.385-.948l2.833-2.823-2.833-2.833q-.385-.385-.385-.938t.391-.948.943-.396.948.396l2.823 2.833 2.833-2.833q.396-.396.938-.396z"/> </symbol> <symbol id="circle-check" viewBox="0 0 32 32"> <title>circle-check icon</title> <path d="M16 1.333q2.99 0 5.703 1.161t4.677 3.125 3.125 4.677 1.161 5.703-1.161 5.703-3.125 4.677-4.677 3.125-5.703 1.161-5.703-1.161-4.677-3.125-3.125-4.677-1.161-5.703 1.161-5.703 3.125-4.677 4.677-3.125 5.703-1.161zm0 2.667q-2.438 0-4.661.953t-3.828 2.557-2.557 3.828-.953 4.661.953 4.661 2.557 3.828 3.828 2.557 4.661.953 4.661-.953 3.828-2.557 2.557-3.828.953-4.661-.953-4.661-2.557-3.828-3.828-2.557-4.661-.953zm4.49 7.99q.552 0 .943.391t.391.943-.396.948l-5.656 5.656q-.385.385-.938.385-.563 0-.948-.385l-2.833-2.823q-.385-.385-.385-.948 0-.552.391-.943t.943-.391.948.396l1.885 1.885 4.708-4.719q.396-.396.948-.396z"/> </symbol> <!-- .... --></svg>
使用 id 引用這個 SVG 中的 Icon 有兩種方式:
將上述 SVG 作為 body 的第一個元素插入在 HTML 中然後:
<svg class="icon"> <use xlink:href="#circle-cross"></use></svg>
或者,講SVG儲存成檔案,以地址方式引用:
<svg class="icon"> <use xlink:href="/img/posts/svg-icons.svg#circle-check"></use></svg><svg class="icon"> <use xlink:href="/img/posts/svg-icons.svg#circle-cross"></use></svg>
這種方式使用上跟img標籤沒有什麼太大的差別了。好處在於所有的表徵圖都在一個檔案中,因此只會請求一次。 這種不需要像 Sprite 那樣繁瑣的設定圖片的位移。使用 id 命名表徵圖並使用時直接使用 id 引用既直觀又簡單。 其靈活性和 Inline SVG 幾乎一樣——你可以設定顏色、邊線樣式、大小等等。 視瀏覽器的不同,有時你需要使用作為 SVG 標籤的開始。
web常見幾種處理表徵圖方法