页面上一些小icon的制作方法及技术选择
我們經常切片的時候，看到一些小圖標,都有些心頭小煩。當然我們一般為了兼容多款瀏覽器。選擇保守的切圖拼成雪碧圖。然后通過background-position去定位到你想要用的圖標.
隨著我們一步步摒棄兼容性差的瀏覽器。我們也可以通過不同的技術手段去實現小圖標。接下來。我將總結我曾用過的各種方法。實現頁面小圖標的方法
1. 切下小圖標然后拼成位置合理的雪碧圖；
通過background-position樣式來定位到你想要用的方法。這是最常用的方法；
劣勢：當初在wap版運用該方法時遇到了問題。每個小圖標呈現在頁面上總是有部分其他圖標卡在頁面上。如下圖
這是chrome瀏覽器開發工具所呈現的效果，不細看是看不出來的。 但只在iphone4下觀看，會發現圖標嚴重沒對齊。
思考方向：我認真排查html及css的問題。最后我自己重新寫demo,運用淘寶的移動端運用的技術flexible.js，得到解決。
總結：之所以造成這種原因，是因為我們的頁面模板中設置根字體的大小精度不夠，對于緊湊的背景圖定位就會放大這個問題。
當然臨時解決方案，就暫時就所有小圖標拆開來引用。
優勢：這種背景圖定位方法，在web端運用是非常好的。頁面加載，只需要下載一張背景圖片就好。對優化頁面加載性能是很好的。
?
2. 通過html+css實現一些圖標
?
當我們拿到如下圖的設計稿：
對于右邊的大于符號圖標,我們真心懶得切圖。當然我們的確可以通過 html+css來實現
html: <span>></span>css: span{font-size:20px;font-family: "宋體"； }實現效果還是挺好的：
分析： 這種方案在web端是可實現的，但是移動端是無法實現，手機版本太多了，瀏覽器種類也太多。估計每款手機都不太能渲染出我們要的宋體。
總結：根據自身項目的開發平臺和需求，我們可以選擇這種方法制作圖標
3.css3屬性實現
我們依舊參照上圖設計稿制作出一個箭頭
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>narrow</title> </head> <style>div{width: 50px;height: 50px;border:1px solid #fff;border-right:1px solid #333;border-bottom:1px solid #333;transform:rotateZ(-45deg);margin-top:50px;} </style> <body><div></div> </body> </html>實現效果：
總結： 一看就知道。ie8及以下瀏覽器是不能支持css3屬性的。 這個運用還是要看需求方對瀏覽器的要求了
?
4. 插入特殊字符實現圖標
還是參照以上的設計稿--制作箭頭
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>narrow</title> </head> <style>body{background: pink}div.narrow{width: 50px;height: 50px;border:1px solid transparent;border-right:1px solid #333;border-bottom:1px solid #333;transform:rotateZ(-45deg);margin-top:50px;}.box{position: relative;width:200px;height: 200px;}.box div{font-size:100px;position: absolute;left:0;top:0;}.box div.black{left:2px;top:0;z-index: 8}.box div.white{z-index: 9} </style> <body><div class="narrow"></div><div class="box"><div class="white">◆</div><div class="black">◇</div></div> </body> </html>實現效果：
圖上標題4就是通過特殊字符實現的。
總結：一直覺得 前端工作相比后端開發，總是多了很多想象力。每個人寫出來的頁面總是有自己的特色。可能這就是我為什么成為前端工程師并一直堅持下去的魅力所在吧
5.icon-font實現頁面圖標，不用加載一張圖片。
待續：....................
?
轉載于:https://www.cnblogs.com/xiaoxingyiyi/p/5458204.html
總結
以上是生活随笔為你收集整理的页面上一些小icon的制作方法及技术选择的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 求高精度幂(java)
- 下一篇： lnmp 60秒的服务器缓存时间