網(wǎng)站圖標(biāo)開發(fā)指南（精）
圖標(biāo)是網(wǎng)站中非常友好的附加物，許多網(wǎng)站都會使用各種圖標(biāo)來美化頁面樣式，給用戶提供更好的指引。本文將會和大家一起學(xué)習(xí)頁面圖標(biāo)的發(fā)展歷史，以及最優(yōu)的解決方案。
傳統(tǒng)圖標(biāo) 字體圖標(biāo) SVG 圖標(biāo)
傳統(tǒng)圖標(biāo)
編寫圖標(biāo)最簡單的方式就是使用一張圖片，如：
<html>
<body>
圖標(biāo) <img src="xxx.png" />
</body>
</html>
在我剛開始寫頁面的時候就是這樣做的，感覺 so easy，直到業(yè)務(wù)變得越來越復(fù)雜，我就不得不思考以下幾個問題：
圖標(biāo)需要適配多個客戶端 圖標(biāo)太多需要優(yōu)化 圖標(biāo)需要動態(tài)修改顏色
對于適配多個客戶端的問題，設(shè)計師們通常都會給我們提供多個尺寸的設(shè)計圖（@1x 圖、@2x 圖），于是我們就可以根據(jù)不同的客戶端來選擇對應(yīng)尺寸的圖片。
通常使用方式是：媒體類型 或 配置 srcset。
例如：
<html>
<head>
<style>
/* 使用媒體查詢，為每個端適配不同尺寸的圖片 */
.@media screen and (max-width: 300px) {
.img {
background-image: url("1x.png");
}
}
.@media screen and (max-width: 600px) {
.img {
background-image: url("2x.png");
}
}
</style>
</head>
<body>
<!-- srcset 可以讓不同的客戶端自動匹配合適尺寸的圖片-->
<!-- 如：當(dāng)設(shè)備像素比為 2 時，瀏覽器會自動選擇 2x 圖進行渲染-->
<img src="1x.png" srcset="1x.png 1x, 2x.png 2x" />
</body>
</html>
通過上面的方法，多客戶端適配問題解決了，但我們使用了多張內(nèi)容相同、尺寸不同的圖標(biāo)，這無疑增加了圖片的數(shù)量。
隨著圖片的增多，圖片管理就是一個問題。每一張圖片都會發(fā)起一個 HTTP 請求，而瀏覽器并行加載同一域名下的請求是有限制的，太多的圖片無法全部并行加載，就會進行排隊加載，排在后面的圖片也就不能及時得到渲染。
通常，解決大量圖片 HTTP 請求，有兩種方式：
雪碧圖 Base64 圖
雪碧圖指的是，將所有小圖片合并成一張大圖片。在瀏覽器渲染時，這張大圖片只需要發(fā)起一次 HTTP 請求，然后就被瀏覽器緩存起來了，當(dāng)再次使用該圖片時，就會直接從緩存中進行讀取，從而避免了發(fā)起多次 HTTP 請求。
首先，我們需要將許多小圖片合成一張大圖：
然后在 CSS 中進行定位。
.icon1,
.icon2,
.icon3 {
width: 54px;
height: 54px;
background: url("../大圖.png");
}
/* 定位背景圖，讓圖片顯示到對應(yīng)的位置 */
.icon1 {
background-position: -168px 0px;
}
.icon2 {
background-position: -56px 0px;
}
.icon3 {
background-position: 0px 0px;
}
可以看到，使用雪碧圖布局時，所有的圖片都使用了同一張大圖，然后使用背景圖去定位，以區(qū)分不同的小圖標(biāo)。
總結(jié)一下雪碧圖的特點：
只需發(fā)起一次 HTTP 請求。 只能通過 CSS 背景圖渲染。 如果只用到了大圖中的一張小圖，也必須加載整張大圖，有點浪費資源。 不利于維護，每次新增圖標(biāo)時，都不能影響到之前已經(jīng)排好的圖標(biāo)，所以生成工具需要更智能。
接下來，我們看一下 Base64 圖：
Base64 圖指的是，將一張圖片數(shù)據(jù)編碼成一串字符串，并使用該字符串代替圖像地址。
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MY"
/>
可以看到，圖片的 src 并不是一個地址，而是一個字符串，這樣甚至可以不發(fā)起 HTTP 請求，就能渲染圖片。
Base64 的原理是 Data URLs，即：前綴為
data:協(xié)議的 URL，允許開發(fā)者向 HTML 中嵌入小文件。
總結(jié)一下 Base64 圖的特點：
無 HTTP 請求。 圖片內(nèi)容由字符串表示，通常會很長，這必定會增加 HTML 的大小。 Base64 并不是 url，所以不能進行緩存。 適用于極小的圖片，如：1x1 的小圖，用作背景圖，重復(fù)渲染平鋪整個頁面。
Ok，我們來總結(jié)一下傳統(tǒng)圖片畫圖標(biāo)的幾種方式：
最后剩下動態(tài)修改圖片顏色的問題，這個就比較難控制了，可以用 CSS Filter 去做濾鏡，通過調(diào)整圖片的模糊度、對比度、灰度、透明度等，間接地改變圖片顏色。
例如：
img {
// 讓圖片變灰
filter: grayscale(100%);
// 讓圖片變模糊
filter: blur(5px);
// ...
}
但是 CSS Filter 能修改的顏色是有限的，如果想任意修改圖標(biāo)顏色，我們繼續(xù)往下看。
字體圖標(biāo)
隨著互聯(lián)網(wǎng)的不斷發(fā)展，字體圖標(biāo)逐漸來到了我們的視野，它可以像處理文字一樣去處理圖標(biāo)，大大地提高了圖標(biāo)的靈活性。使用字體圖標(biāo)可以非常輕松地修改圖標(biāo)顏色。
字體圖標(biāo)的使用方式
字體圖標(biāo)使用方式特別方便，我們只需要在頁面中引入對應(yīng)的字體文件，然后編寫對應(yīng)的字符就可以了。
字體圖標(biāo)有兩種寫法：
直接編寫 Unicode 編碼。 使用偽類去寫 Unicode 編碼。
例如：
<html>
<head>
<style>
/* 首先引入字體文件 */
@font-face {
font-family: "iconfont";
src: url("iconfont.eot"), url("iconfont.woff") format("woff"), url("iconfont.ttf")
format("truetype"), url("iconfont.svg#iconfont") format("svg");
}
/* 定義字體類 */
.iconfont {
font-family: "iconfont";
font-size: 16px;
}
/* 在偽類中編寫 unicode 字符 */
.icon-edit:before {
content: "\e603";
}
</style>
</head>
<body>
<!-- 使用 &# + unicode 編碼可以渲染對應(yīng)的字符。 -->
直接使用字符編碼：
<i class="iconfont"></i> 使用類名渲染（將字符寫在了偽類中）：<i
class="iconfont icon-edit"
style="color:red"
></i>
</body>
</html>
可以看到，我們可以像處理文字一樣去修改字體圖標(biāo)的顏色。
字體圖標(biāo)的原理
字體圖標(biāo)的本質(zhì)是一種字符，而字符又是字體渲染出來的，字體決定了我們在鍵盤上敲打的字符最終在頁面上長什么樣。
這就好比書法家寫字，不同的字體就是不同的書法家，不同的書法家雖然都在寫同一個字，但是由于字跡的不同，寫出來的文字也就大不相同。
試想一下：有一個特立獨行的書法家，他并不按照常規(guī)的寫法來寫字，他寫出來的字都是一個個的小圖標(biāo)，那不就是字體圖標(biāo)了嗎 ??
其實，書法家寫字這個道理，在網(wǎng)頁中也是一樣的。
頁面在渲染文字的時候，會先將文字轉(zhuǎn)換為對應(yīng)的 unicode 編碼，然后根據(jù) css 中配置的 @font-face url 找到對應(yīng)的字體文件（eot ttf woff 等），接下來在該字體文件中找到這個 unicode 編碼對應(yīng)的繪制外形，最后繪制在頁面上。
我們看到的內(nèi)容 = fontFamily(unicode);
深入字符編碼
在計算機中，我們能看到的所有字符，底層都是用二進制來表示的，如：空格符在二進制中就是 00100000，大寫的字母 A 在二進制中就是 01000001 。
為了方便維護字符和二進制的關(guān)系，前輩們將這些對應(yīng)關(guān)系記錄成一張表。
| ID | 字符 | 二進制 |
|---|---|---|
| 32 | 空格符 | 00100000 |
| 65 | A | 01000001 |
這個表就是我們常說的字符編碼，上表即 ASCII 編碼的一部分。
最初的 ASCII 編碼只能表示 128 個符號，主要存儲的是 26 個英文字母的大小寫和數(shù)字等。有了 ASCII 編碼后，我們就能編寫對應(yīng)的字體去渲染表中的字符了，但其他沒有被記錄的符號也就無法顯示了，如：不同國家的漢字、emoji 符號等。
為了解決中文字符編碼問題，國家制定了 GB2312 編碼，該編碼收錄了 6763 個漢字，涵蓋了中國大陸 99.75% 的使用頻率，能滿足絕大多數(shù)的漢字需求。
但 GB2312 編碼只適用于中文，而世界上還有 200 多個國家，他們也有自己獨特的文字，難道每一個國家都需要自制一套字符編碼嗎？
其實不用，在 1991 年 10 月，誕生了 unicode 編碼，它制定了一套統(tǒng)一的編碼標(biāo)準(zhǔn)，收納了世界上所有國家的文字符號，到目前為止，已經(jīng)有 100 多萬個符號。
unicode 最多 4 個字節(jié)，一個字節(jié) 8 個比特位（表示二進制中的 0 或 1），也就是
2**32個狀態(tài)，完全可以容納世界上所有的符號。
所以，任何一個符號，都可以在 unicode 編碼中被找到。
總結(jié)一下字體圖標(biāo)的特點：
字體圖標(biāo)是矢量圖，即使放大也不會變模糊。 字體圖標(biāo)可以通過 CSS 樣式進行控制，使用更加靈活。 字體文件一般比較大，但可以將不用的字體刪掉。
最后，字體圖標(biāo)雖好，但它的本質(zhì)仍然一種文字，所以 CSS 在設(shè)置 color 時只能選一種顏色，如果我們想制作一個多色的小圖標(biāo)，也就無能為力了。
SVG 圖標(biāo)
SVG 誕生于 1999 年，目的是用來繪制矢量圖形，它主要通過定義必要的線和形狀來創(chuàng)建一個圖形。
SVG 圖標(biāo)使用方式
SVG 采用 XML 格式的語法來畫圖，例如：
<html>
<head>
<style>
.my-style {
/* 控制填充色 */
fill: red;
}
.my-style use {
color: orange;
}
</style>
</head>
<body>
<svg style="display: none;">
<symbol viewBox="0 0 24 24" id="heart">
<path
d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"
></path>
</symbol>
</svg>
<svg class="my-style">
<use xlink:href="#heart" />
</svg>
</body>
</html>
可以看到，首先我們把需要使用的圖標(biāo)封裝到 symbol 標(biāo)簽中，在使用時只需要 use 一下就可以了。這跟我們定義一個 CSS class 然后再去 HTML 中引用是一個道理。
通常的 SVG 圖標(biāo)庫會把所有用到的圖標(biāo)封裝到一個 JS 文件中，我們只需要引入這個 JS 文件，然后就能直接 use 對應(yīng)的圖標(biāo)了。
我們再看一個多色圖標(biāo)的例子：
<html>
<head>
<style>
/* svg 中的元素存在于 shadom 中，可以通過自定義變量傳遞參數(shù) */
.icon {
width: 100px;
height: 100px;
margin-right: 10px;
}
.icon--fill {
fill: grey;
}
.icon--color {
fill: #ef5b49;
--handle-color: #c13127;
--cup-color: #ef5b49;
--smoke-color: #cacaea;
}
.icon--color-alt {
fill: #2f3fff;
--handle-color: #1f2bac;
--cup-color: #2f3fff;
--smoke-color: #a5acbd;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" class="hidden">
<symbol id="icon-coffee" viewBox="0 0 20 20">
<title>icon-coffee</title>
<!-- 使用自定義變量 -->
<path
fill="var(--handle-color)"
d="M15,17H14V9h3a3,3,0,0,1,3,3h0A5,5,0,0,1,15,17Zm1-6v3.83A3,3,0,0,0,18,12a1,1,0,0,0-1-1Z"
/>
<rect
fill="var(--cup-color)"
x="1"
y="7"
width="15"
height="12"
rx="3"
ry="3"
/>
<path
fill="var(--smoke-color)"
d="M7.07,5.42a5.45,5.45,0,0,1,0-4.85,1,1,0,0,1,1.79.89,3.44,3.44,0,0,0,0,3.06,1,1,0,0,1-1.79.89Z"
/>
<path
fill="var(--smoke-color)"
d="M3.07,5.42a5.45,5.45,0,0,1,0-4.85,1,1,0,0,1,1.79.89,3.44,3.44,0,0,0,0,3.06,1,1,0,1,1-1.79.89Z"
/>
<path
fill="var(--smoke-color)"
d="M11.07,5.42a5.45,5.45,0,0,1,0-4.85,1,1,0,0,1,1.79.89,3.44,3.44,0,0,0,0,3.06,1,1,0,1,1-1.79.89Z"
/>
</symbol>
</svg>
使用
<svg class="icon icon--color" aria-hidden="true">
<use xlink:href="#icon-coffee" href="#icon-coffee" />
</svg>
</body>
</html>
可以看到，SVG 和 HTML 一樣具有樹形結(jié)構(gòu)，結(jié)構(gòu)中的 path 都是圖形中的一個區(qū)域，這些區(qū)域可以被 CSS 選擇器匹配到。當(dāng)我們匹配到對應(yīng)的區(qū)域時，就能進行對應(yīng)的顏色修改了，一張多色的 SVG 圖也就做好了。
總結(jié)一下 SVG 圖標(biāo)的特點：
支持動態(tài)修改多個區(qū)域的顏色 支持漸變色 矢量圖，放大也不會變模糊
思考與總結(jié)
本文介紹了 3 種小圖標(biāo)的使用方式，這里做一個簡單回顧。
傳統(tǒng)圖標(biāo)，簡單粗暴，切好圖就能用，但需考慮不同尺寸以兼容不同設(shè)備，圖片的顏色不好更改。 字體圖標(biāo)，需要引入字體文件，然后編寫特定的字符，可以很方便的修改顏色，但只能是單色。 SVG 圖標(biāo)，需要引入預(yù)先定義好圖標(biāo)的 SVG 文件，然后將具體的圖標(biāo) use 出來即可，可以分別修改圖標(biāo)中不同部位的顏色。
總體來說，3 種圖標(biāo)使用起來都很簡單，而 SVG 圖標(biāo)則是一個大趨勢，我們可以視具體情況來做選擇。