應(yīng)該了解的 Web 圖標(biāo)解決方案

zhangwang 發(fā)布于2019-08-02 15:55 / 1261人閱讀

摘要：那么，在我們當(dāng)下的前端開發(fā)中，最常見的圖標(biāo)解決方案有哪些呢大概是三種，圖片和。

A picture is worth a thousand words, 一圖勝千言。 沒錯，從 Web 誕生的那天開始，圖標(biāo)就成為視覺層面不可或缺的一個元素，在一個 Web 頁面中，一個圖標(biāo)不僅僅能從視覺上帶來優(yōu)雅感，更重要的是，它對此處的功能起到了點睛之筆的作用，它會使得用戶更容易理解你的產(chǎn)品。那么，在我們當(dāng)下的 Web 前端開發(fā)中，最常見的圖標(biāo)解決方案有哪些呢？大概是三種，圖片、IconFont 和 Svg。圖片就不說了，就是整一坨小的 png 圖片作為圖標(biāo)，最終把他們合在一個圖片里，此種技術(shù)還有一個好聽的名字 CSS Sprites，國人稱為 雪碧圖，此種方案還是 Web 前端性能優(yōu)化軍規(guī)之一，降低 http 請求數(shù)來達到提速的目的。

圖片咱們今天不說了，沒啥意思。咱們今天聊聊 IconFont 和 inline SVG，然后把這兩個方案的優(yōu)劣進行一個對比，然后再介紹介紹常見的 IconFont 庫及 inline SVG 的庫，最后再展示一個小 Demo 給大家看一看具體在頁面上 IconFont 和 Svg 有什么不同。

IconFont 介紹

IconFont 使用的技術(shù)是 CSS 自定義字體，用戶可以把圖標(biāo)集合打包成字體文件 ( 如何打包，可使用 iconfont.cn )，然后通過 @font-face 來自定義一個字體，最后通過設(shè)置 font-family 以及通過使用圖標(biāo)字體的 unicode編碼 來使用圖標(biāo)。

在 CSS 里聲明字體，編寫 unicode 編碼對應(yīng)的圖標(biāo)：

@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 有大量的開源解決方案，而且有很多現(xiàn)成的圖標(biāo)，比較具有代表性的如下：

FontAwesome，具備完善大量的圖標(biāo)庫，對于定制化程度不高的項目，可以直接拿過來用

Iconfont.cn，阿里的解決方案，不但有現(xiàn)成的圖標(biāo)供你選擇，還可以上傳自己的圖標(biāo)來制作 IconFont

IconFont 的最大的好處就是瀏覽器兼容性好（IE6+），可以通過 CSS 來控制圖標(biāo)大小、顏色。

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 工具，統(tǒng)一維護，統(tǒng)一管理。

inline SVG 目前沒有什么特別推薦的開源解決方案，一般情況下，圖標(biāo)都是自己的，自己通過工具打包就已經(jīng)很方便了，而且很難通過純 CSS 或 JS 來解決，因為它跟 HTML 的關(guān)聯(lián)性太大了，即使是這樣，還是推薦一個庫給大家了解了解：

SVGInjector

IconFont 與 inline SVG 方案對比 瀏覽器兼容性

IconFont	inline SVG
IE6+	IE9+ , Android 3.0+ 移動端支持很好，現(xiàn)在可以使用

尺寸、顏色是否容易控制

IconFont	inline SVG
瀏覽器會認為它是一個字體，因此只能使用 color 和 font-size 控制，而且尺寸特別不精細	支持多色、局部顏色控制、控制尺寸使用 width 和 height

訪問的穩(wěn)定性

IconFont	inline SVG
Font 在 CDN 上會有跨域問題；而且字體下載不下來是很常見的事；還有一些已知的Chrome的Bug ；貌似代理性質(zhì)的瀏覽器，像 UC ，就不支持自定義 Font；一些瀏覽器攔截插件會攔截自定義字體......	Svg很正常

語義化

IconFont	inline SVG
根本不語義化，你要寫多余沒有意義的標(biāo)簽，對 SEO 很不利	Svg 是圖形，人家就是圖形，而且 SVG Symbol 支持 title 和 description 屬性，非常友好

用起來是否順滑

IconFont	inline SVG
自己生成 svg 然后使用工具打包成多個字體文件，然后用 unicode 對應(yīng)使用	SVG Symbol 使用打包工具生成 SVG 集合，直接通過 ID 使用

IconFont 與 SVG 的 Demo

請去我的CodePen

總結(jié)

如果，你的產(chǎn)品需要支持 IE8 及以下，還是推薦使用 IconFont ，因為使用 SVG Symbol 的話，你需要考慮在低端瀏覽器下的兼容性，常見的做法是，生成一些 png 的圖片做 fallback，然后在低端瀏覽器下顯示，把 svg 隱藏.....

如果，你只需要考慮 IE9+ 和 Android 3.0 + ，毫無疑問，inline SVG 是唯一選擇！