一款圖標(biāo)字體查看器，能查看圖標(biāo)字體里的圖標(biāo)，找到對(duì)應(yīng)的unicode值及字符，甚至可以直接復(fù)制圖標(biāo)的svg代碼到剪貼板。支持 woff、woff2、ttf、otf格式。當(dāng)然本工具也適合用它來(lái)查看一款字體的字形數(shù)量和字樣、以及字體內(nèi)嵌的版權(quán)信息個(gè)PostScript名稱。

Iconfont，也稱為圖標(biāo)字體或webfont，是一種將圖標(biāo)制作成字體文件的技術(shù)。這種技術(shù)允許開發(fā)者像使用文字一樣便捷地使用和設(shè)置圖標(biāo)，因此在網(wǎng)頁(yè)和移動(dòng)應(yīng)用程序設(shè)計(jì)中被廣泛應(yīng)用。

在圖標(biāo)字體普及之前，圖標(biāo)通常是通過(guò)圖片來(lái)展示的。如今，圖標(biāo)字體已成為展示圖標(biāo)的更佳選擇。使用圖標(biāo)字體可以通過(guò)CSS輕松調(diào)整圖標(biāo)的屬性，例如大小、顏色和特殊效果等。許多前端開發(fā)框架都采用圖標(biāo)字體作為系統(tǒng)圖標(biāo)集的解決方案。

圖標(biāo)在視覺(jué)上能夠簡(jiǎn)潔有效地引導(dǎo)用戶操作。在某些特殊情況下，圖標(biāo)甚至可以替代文本，提供更直觀的用戶體驗(yàn)。

Iconfont的優(yōu)點(diǎn)

靈活性高：可以輕松改變圖標(biāo)的顏色、大小和其他CSS屬性。

性能優(yōu)化：通過(guò)減少HTTP請(qǐng)求，提高頁(yè)面加載速度。

文件體積?。合啾葓D片，字體文件通常更小，從而減少總體積。

擴(kuò)展性好：支持高分辨率屏幕，不會(huì)因放大而失真。

常見的Iconfont字體庫(kù)

Font Awesome

• 最受歡迎的圖標(biāo)集之一，提供了大量的免費(fèi)圖標(biāo)，本工具默認(rèn)會(huì)加載經(jīng)典的4.7版本字體。
• 網(wǎng)址：https://fontawesome.com/

Bootstrap Icons

• 是 Bootstrap 5 中引入的獨(dú)立圖標(biāo)庫(kù)，提供了超過(guò) 1,000 個(gè)圖標(biāo)。
• 網(wǎng)址： https://icons.getbootstrap.com/

Glyphicons

• Glyphicon Halflings 一般是收費(fèi)的，但它的作者提供了250多個(gè)圖標(biāo)，作為 Bootstrap 3 內(nèi)置圖標(biāo)集。
• 網(wǎng)址：https://v3.bootcss.com/components/#glyphicons-glyphs

ZUI Icons

• 基于FontAwesome 4.3定制，去除了一些不常用的圖標(biāo)，并加入了一些適合中國(guó)使用的圖標(biāo)。
• 網(wǎng)址：https://openzui.com/1/#control/icon

Layui Icons

• Layui 是一套免費(fèi)的開源 Web UI 組件庫(kù)，官方也準(zhǔn)備了一套含有 186 個(gè)圖標(biāo)的字體庫(kù)。
• 網(wǎng)址：https://layui.dev/docs/2/icon/

Element Icons

• Element，是一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫(kù)，提供了一套簡(jiǎn)約風(fēng)格的圖標(biāo)字體。
• 字體文件里面包含了字符名稱，使用本工具可以拿到圖標(biāo)的類名，例如 名稱為ice-cream-round的圖標(biāo)對(duì)應(yīng)的類名是el-icon-ice-cream-round。
• 網(wǎng)址：https://element.eleme.cn/#/zh-CN/component/icon

Material Icons

• Google的Material Design圖標(biāo)庫(kù)，提供了豐富的圖標(biāo)集，適合現(xiàn)代化的界面設(shè)計(jì)。
• 網(wǎng)址：https://fonts.google.com/icons

Feather Icons

• 簡(jiǎn)潔優(yōu)雅的開源圖標(biāo)集，適合現(xiàn)代化的用戶界面。
• 網(wǎng)址：https://feathericons.com/

Ionicons

• 由Ionic Framework團(tuán)隊(duì)開發(fā)，提供了精美的開源圖標(biāo)庫(kù)。
• 網(wǎng)址：https://ionicons.com/

Lucide

• Lucide有清晰的意思，號(hào)稱“漂亮且風(fēng)格統(tǒng)一的圖標(biāo)”，擁有1500+線性圖標(biāo)。
• 網(wǎng)址：https://lucide.dev/

Iconfont

• 很多時(shí)候大家提到iconfont，是指阿里巴巴矢量圖標(biāo)庫(kù)，它不是一個(gè)字體庫(kù)文件，而是一個(gè)提供大量中文友好的圖標(biāo)的網(wǎng)站。
• 支持選擇自己喜歡的圖標(biāo)，以生成單獨(dú)的圖標(biāo)庫(kù)字體文件。
• 許多app開發(fā)者會(huì)在該網(wǎng)站定制圖標(biāo)字體，如果遺失css等描述文件，可以使用本工具逆向生成iconfont.css文件。
• 使用本工具，你能一眼看穿字體里面的所有圖標(biāo)，如果現(xiàn)有圖標(biāo)能夠覆蓋業(yè)務(wù)需求，只需復(fù)制對(duì)應(yīng)字符文本到工程即可，如果不夠，在iconfont重新生成即可。部分圖標(biāo)如果有瑕疵，遇到圖標(biāo)無(wú)法變色等問(wèn)題，可以導(dǎo)出svg文件，在設(shè)計(jì)軟件里面查看調(diào)整。
• 網(wǎng)址：https://www.iconfont.cn/

Wingdings

• 由微軟在1990年開發(fā)，它將許多字母渲染成各式各樣的符號(hào)，由于它是內(nèi)置在WINDOWS操作系統(tǒng)中，用途十分廣泛。它是一種TrueType符號(hào)字體（TTF），本工具也支持查看.ttf文件。

SF Symbols

• SF Symbols 不是通過(guò)傳統(tǒng)的 .woff 或 .woff2 字體文件提供的，而是作為軟件包提供的，包含了圖標(biāo)和用于在 Apple 平臺(tái)上使用這些圖標(biāo)的工具。
• 主要用于 iOS、macOS、watchOS 和 tvOS 應(yīng)用程序開發(fā)，使用 Swift 和 SwiftUI。對(duì)于網(wǎng)頁(yè)開發(fā)，Apple 并沒(méi)有提供官方的 CDN 或 Web 字體版本的 SF Symbols。
• 網(wǎng)址：https://developer.apple.com/sf-symbols/

常見問(wèn)題

問(wèn)：為什么有些字體會(huì)獲取失??？

答：本工具使用 JavaScript 原生的 fetch 方法來(lái)請(qǐng)求字體文件，如果對(duì)方服務(wù)器做了跨域限制，就會(huì)獲取失敗，此時(shí)可以先下載字體到本地，再拖放到工具中。此外，fetch 依賴網(wǎng)絡(luò)環(huán)境，若無(wú)法下載，可在瀏覽器中直接訪問(wèn)字體地址查看錯(cuò)誤詳情。

問(wèn)：圖標(biāo)字體和傳統(tǒng)的字體有什么區(qū)別？

答：圖標(biāo)字體用于顯示圖標(biāo)，適用于網(wǎng)頁(yè)和應(yīng)用程序的用戶界面設(shè)計(jì)，可以像文字一樣被樣式化。它們包含各種圖標(biāo)符號(hào)，每個(gè)符號(hào)對(duì)應(yīng)一個(gè)字體字符編碼。傳統(tǒng)字體則用于顯示文本字符，如字母、數(shù)字和標(biāo)點(diǎn)符號(hào)，主要用于排版和文本顯示，字體設(shè)計(jì)師也會(huì)嚴(yán)格按照碼位進(jìn)行字體設(shè)計(jì)，而圖標(biāo)字體的碼位各異，即使碼位相同形狀也不一樣。

問(wèn)：woff 和 woff2字體的區(qū)別？

答：WOFF 和 WOFF2 是兩種用于網(wǎng)頁(yè)的字體格式，主要區(qū)別在于壓縮效率和性能。WOFF2 使用更先進(jìn)的 Brotli 壓縮算法，比 WOFF 文件更小，加載速度更快，從而提升網(wǎng)頁(yè)性能。WOFF 在較舊的瀏覽器中支持更廣泛，而 WOFF2 主要被現(xiàn)代瀏覽器支持。因此，網(wǎng)頁(yè)設(shè)計(jì)中通常同時(shí)提供這兩種格式以確保兼容性。WOFF 是 W3C 的推薦標(biāo)準(zhǔn)，而 WOFF2 是其改進(jìn)版本，逐漸成為新的標(biāo)準(zhǔn)。

問(wèn)：如何得到字體里面的字符集？

答：點(diǎn)擊右上角的，圖標(biāo)帶有csv字樣的按鈕，此時(shí)工具會(huì)將字體里面的所有字符集導(dǎo)出。

問(wèn)：一般提到字體時(shí)提起的GB2312是什么？

答：GB2312 包含 6763 個(gè)常用漢字，許多字體設(shè)計(jì)師在設(shè)計(jì)中文字體時(shí)以此為基礎(chǔ)。然而，GB2312 覆蓋的字符有限，尤其是生僻字和繁體字。這促使了更大字符集的發(fā)展，如 GBK 和 GB18030。GBK 收錄了 21,886 個(gè)漢字和圖形符號(hào)，其中 "K" 代表 "擴(kuò)展" 的拼音首字母。GB 18030 兼容 GB2312 和 GBK，共收錄漢字 70,244 個(gè)。Big5 是用于繁體中文的字符集標(biāo)準(zhǔn)，包含 13,060 個(gè)漢字。例如：GB2312不包含人在囧途的“囧”（jiǒng）字，也不含龍行龘龘后面的“龘龘”（dá dá）二字。號(hào)稱‘消滅豆腐塊’的思源黑體則擁有4.4萬(wàn)個(gè)碼位，甚至支持顯示