資訊專欄INFORMATION COLUMN
摘要：那么，在我們當下的前端開發中，最常見的圖標解決方案有哪些呢大概是三種，圖片和。
A picture is worth a thousand words, 一圖勝千言。 沒錯，從 Web 誕生的那天開始，圖標就成為視覺層面不可或缺的一個元素，在一個 Web 頁面中，一個圖標不僅僅能從視覺上帶來優雅感，更重要的是，它對此處的功能起到了點睛之筆的作用，它會使得用戶更容易理解你的產品。那么，在我們當下的 Web 前端開發中，最常見的圖標解決方案有哪些呢？大概是三種，圖片、IconFont 和 Svg。圖片就不說了，就是整一坨小的 png 圖片作為圖標，最終把他們合在一個圖片里，此種技術還有一個好聽的名字 CSS Sprites，國人稱為 雪碧圖，此種方案還是 Web 前端性能優化軍規之一，降低 http 請求數來達到提速的目的。
圖片咱們今天不說了，沒啥意思。咱們今天聊聊 IconFont 和 inline SVG，然后把這兩個方案的優劣進行一個對比，然后再介紹介紹常見的 IconFont 庫及 inline SVG 的庫，最后再展示一個小 Demo 給大家看一看具體在頁面上 IconFont 和 Svg 有什么不同。
IconFont 介紹IconFont 使用的技術是 CSS 自定義字體，用戶可以把圖標集合打包成字體文件 ( 如何打包，可使用 iconfont.cn )，然后通過 @font-face 來自定義一個字體，最后通過設置 font-family 以及通過使用圖標字體的 unicode編碼 來使用圖標。
在 CSS 里聲明字體，編寫 unicode 編碼對應的圖標：
@font-face {
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.6.3");
src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3") format("embedded-opentype"),
url("../fonts/fontawesome-webfont.woff2?v=4.6.3") format("woff2"),
url("../fonts/fontawesome-webfont.woff?v=4.6.3") format("woff"),
url("../fonts/fontawesome-webfont.ttf?v=4.6.3") format("truetype"),
url("../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular") format("svg");
font-weight: normal;
font-style: normal;
}
.fa {
font-family: "FontAwesome";
display: inline-block;
}
.fa-icon:after {
content: "f00c"
}
在 HTML 里這么寫就可以了：
IconFont 有大量的開源解決方案，而且有很多現成的圖標，比較具有代表性的如下：
FontAwesome，具備完善大量的圖標庫，對于定制化程度不高的項目，可以直接拿過來用
Iconfont.cn，阿里的解決方案，不但有現成的圖標供你選擇，還可以上傳自己的圖標來制作 IconFont
IconFont 的最大的好處就是瀏覽器兼容性好（IE6+），可以通過 CSS 來控制圖標大小、顏色。
inline SVG 介紹使用 IconFont 是把已有的矢量文件（通常是很多 .svg 文件）打包成字體文件，而 inline SVG 則是把 .svg 文件合并成一個大的 .svg 文件，然后在 HTML 中引用這個文件即可，具體步驟參考下面。
合并 svg在這里搞了三個 svg 文件，準備把他們合并在一起：
SVG Symbol我這里使用的是 svg-symbol 方案來合并 svg。
還有一個合并方法是 SVG defs，這個比 SVG Symbol 要雞肋很多，在此就不介紹了。
通過使用 gulp-svg-symbols 來把 svg 文件合并：
var gulp = require("gulp");
var svgSymbols = require("gulp-svg-symbols");
gulp.task("sprites", function () {
return gulp.src("assets/svg/*.svg")
.pipe(svgSymbols())
.pipe(gulp.dest("assets"));
});
最終得到的 svg 文件：
使用方法在 HTML 文件中聲明 svg，然后通過 來使用：
你也可以通過 來直接使用存儲在 CDN 上的 svg 文件，如果感覺每個都要寫 CDN 的地址太麻煩，則可以封裝 JS 工具，統一維護，統一管理。
inline SVG 目前沒有什么特別推薦的開源解決方案，一般情況下，圖標都是自己的，自己通過工具打包就已經很方便了，而且很難通過純 CSS 或 JS 來解決，因為它跟 HTML 的關聯性太大了，即使是這樣，還是推薦一個庫給大家了解了解：
IconFont 與 inline SVG 方案對比 瀏覽器兼容性SVGInjector
| IconFont | inline SVG |
|---|---|
| IE6+ | IE9+ , Android 3.0+ 移動端支持很好，現在可以使用 |
| IconFont | inline SVG |
|---|---|
| 瀏覽器會認為它是一個字體，因此只能使用 color 和 font-size 控制，而且尺寸特別不精細 | 支持多色、局部顏色控制、控制尺寸使用 width 和 height |
| IconFont | inline SVG |
|---|---|
| Font 在 CDN 上會有跨域問題；而且字體下載不下來是很常見的事；還有一些已知的Chrome的Bug ；貌似代理性質的瀏覽器，像 UC ，就不支持自定義 Font；一些瀏覽器攔截插件會攔截自定義字體...... | Svg很正常 |
| IconFont | inline SVG |
|---|---|
| 根本不語義化，你要寫多余沒有意義的標簽，對 SEO 很不利 | Svg 是圖形，人家就是圖形，而且 SVG Symbol 支持 title 和 description 屬性，非常友好 |
| IconFont | inline SVG |
|---|---|
| 自己生成 svg 然后使用工具打包成多個字體文件，然后用 unicode 對應使用 | SVG Symbol 使用打包工具生成 SVG 集合，直接通過 ID 使用 |
請去我的CodePen
總結如果，你的產品需要支持 IE8 及以下，還是推薦使用 IconFont ，因為使用 SVG Symbol 的話，你需要考慮在低端瀏覽器下的兼容性，常見的做法是，生成一些 png 的圖片做 fallback，然后在低端瀏覽器下顯示，把 svg 隱藏.....
如果，你只需要考慮 IE9+ 和 Android 3.0 + ，毫無疑問，inline SVG 是唯一選擇！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115302.html
摘要：那么，在我們當下的前端開發中，最常見的圖標解決方案有哪些呢大概是三種，圖片和。 showImg(https://segmentfault.com/img/remote/1460000006774999);A picture is worth a thousand words, 一圖勝千言。 沒錯，從 Web 誕生的那天開始，圖標就成為視覺層面不可或缺的一個元素，在一個 Web 頁面中，...
摘要：之所以越來越好用，很大一部分原因歸功于功能豐富的插件對于忠實用戶來說，了解和開發一款適合自己的插件，確實是一件很的事情。 chrome 之所以越來越好用，很大一部分原因歸功于功能豐富的插件；對于chrome忠實用戶來說，了解和開發一款適合自己的chrome插件，確實是一件很cool的事情。 了解chrome 插件 chrome 插件個人理解：就是一個html + js +css + i...
閱讀 3078·2021-11-24 09:38
閱讀 1330·2021-09-22 15:27
閱讀 2967·2021-09-10 10:51
閱讀 1504·2021-09-09 09:33
閱讀 916·2021-08-09 13:47
閱讀 2070·2019-08-30 13:05
閱讀 892·2019-08-29 15:15
閱讀 2425·2019-08-29 12:21
