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

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

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

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

Iconfont的優(yōu)點

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

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

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

擴展性好：支持高分辨率屏幕，不會因放大而失真。

常見的Iconfont字體庫

Font Awesome

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

Bootstrap Icons

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

Glyphicons

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

ZUI Icons

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

Layui Icons

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

Element Icons

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

Material Icons

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

Feather Icons

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

Ionicons

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

Lucide

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

Iconfont

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

Wingdings

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

SF Symbols

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

常見問題

問：為什么有些字體會獲取失??？

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

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

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

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

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

問：如何得到字體里面的字符集？

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

問：一般提到字體時提起的GB2312是什么？

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