時間：2023-10-05 00:24:01 | 來源：網(wǎng)站運營
時間：2023-10-05 00:24:01 來源：網(wǎng)站運營
網(wǎng)站圖標(biāo)開發(fā)指南：
在線咨詢
<html> <body> 圖標(biāo) <img src="xxx.png" /> </body></html>在我剛開始寫頁面的時候就是這樣做的，感覺 so easy，直到業(yè)務(wù)變得越來越復(fù)雜，我就不得不思考以下幾個問題：<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 圖進(jìn)行渲染--> <img src="1x.png" srcset="1x.png 1x, 2x.png 2x" /> </body></html>通過上面的方法，多客戶端適配問題解決了，但我們使用了多張內(nèi)容相同、尺寸不同的圖標(biāo)，這無疑增加了圖片的數(shù)量。.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)。<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MY"/>可以看到，圖片的 src 并不是一個地址，而是一個字符串，這樣甚至可以不發(fā)起 HTTP 請求，就能渲染圖片。 Base64 的原理是 Data URLs，即：前綴為 data: 協(xié)議的 URL，允許開發(fā)者向 HTML 中嵌入小文件。總結(jié)一下 Base64 圖的特點：img { // 讓圖片變灰 filter: grayscale(100%); // 讓圖片變模糊 filter: blur(5px); // ...}但是 CSS Filter 能修改的顏色是有限的，如果想任意修改圖標(biāo)顏色，我們繼續(xù)往下看。<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)的顏色。@font-face url 找到對應(yīng)的字體文件（eot ttf woff 等），接下來在該字體文件中找到這個 unicode 編碼對應(yīng)的繪制外形，最后繪制在頁面上。我們看到的內(nèi)容 = fontFamily(unicode);00100000，大寫的字母 A 在二進(jìn)制中就是 01000001 。 unicode 最多 4 個字節(jié)，一個字節(jié) 8 個比特位（表示二進(jìn)制中的 0 或 1），也就是 2**32 個狀態(tài)，完全可以容納世界上所有的符號。所以，任何一個符號，都可以在 unicode 編碼中被找到。<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 中引用是一個道理。<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ū)域時，就能進(jìn)行對應(yīng)的顏色修改了，一張多色的 SVG 圖也就做好了。案例關(guān)鍵詞：發(fā)指
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
