iconfont查看器

一款图标字体查看器，能查看图标字体里的图标，找到对应的unicode值及字符，甚至可以直接复制图标的svg代码到剪贴板。支持 woff、woff2、ttf、otf格式。当然本工具也适合用它来查看一款字体的字形数量和字样、以及字体内嵌的版权信息个PostScript名称。

Iconfont，也称为图标字体或webfont，是一种将图标制作成字体文件的技术。这种技术允许开发者像使用文字一样便捷地使用和设置图标，因此在网页和移动应用程序设计中被广泛应用。

在图标字体普及之前，图标通常是通过图片来展示的。如今，图标字体已成为展示图标的更佳选择。使用图标字体可以通过CSS轻松调整图标的属性，例如大小、颜色和特殊效果等。许多前端开发框架都采用图标字体作为系统图标集的解决方案。

图标在视觉上能够简洁有效地引导用户操作。在某些特殊情况下，图标甚至可以替代文本，提供更直观的用户体验。

Iconfont的优点

灵活性高：可以轻松改变图标的颜色、大小和其他CSS属性。

性能优化：通过减少HTTP请求，提高页面加载速度。

文件体积小：相比图片，字体文件通常更小，从而减少总体积。

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

常见的Iconfont字体库

Font Awesome

• 最受欢迎的图标集之一，提供了大量的免费图标，本工具默认会加载经典的4.7版本字体。
• 网址：https://fontawesome.com/

Bootstrap Icons

• 是 Bootstrap 5 中引入的独立图标库，提供了超过 1,000 个图标。
• 网址： https://icons.getbootstrap.com/

Glyphicons

• Glyphicon Halflings 一般是收费的，但它的作者提供了250多个图标，作为 Bootstrap 3 内置图标集。
• 网址：https://v3.bootcss.com/components/#glyphicons-glyphs

ZUI Icons

• 基于FontAwesome 4.3定制，去除了一些不常用的图标，并加入了一些适合中国使用的图标。
• 网址：https://openzui.com/1/#control/icon

Layui Icons

• Layui 是一套免费的开源 Web UI 组件库，官方也准备了一套含有 186 个图标的字体库。
• 网址：https://layui.dev/docs/2/icon/

Element Icons

• Element，是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，提供了一套简约风格的图标字体。
• 字体文件里面包含了字符名称，使用本工具可以拿到图标的类名，例如 名称为ice-cream-round的图标对应的类名是el-icon-ice-cream-round。
• 网址：https://element.eleme.cn/#/zh-CN/component/icon

Material Icons

• Google的Material Design图标库，提供了丰富的图标集，适合现代化的界面设计。
• 网址：https://fonts.google.com/icons

Feather Icons

• 简洁优雅的开源图标集，适合现代化的用户界面。
• 网址：https://feathericons.com/

Ionicons

• 由Ionic Framework团队开发，提供了精美的开源图标库。
• 网址：https://ionicons.com/

Lucide

• Lucide有清晰的意思，号称“漂亮且风格统一的图标”，拥有1500+线性图标。
• 网址：https://lucide.dev/

Iconfont

• 很多时候大家提到iconfont，是指阿里巴巴矢量图标库，它不是一个字体库文件，而是一个提供大量中文友好的图标的网站。
• 支持选择自己喜欢的图标，以生成单独的图标库字体文件。
• 许多app开发者会在该网站定制图标字体，如果遗失css等描述文件，可以使用本工具逆向生成iconfont.css文件。
• 使用本工具，你能一眼看穿字体里面的所有图标，如果现有图标能够覆盖业务需求，只需复制对应字符文本到工程即可，如果不够，在iconfont重新生成即可。部分图标如果有瑕疵，遇到图标无法变色等问题，可以导出svg文件，在设计软件里面查看调整。
• 网址：https://www.iconfont.cn/

Wingdings

• 由微软在1990年开发，它将许多字母渲染成各式各样的符号，由于它是内置在WINDOWS操作系统中，用途十分广泛。它是一种TrueType符号字体（TTF），本工具也支持查看.ttf文件。

SF Symbols

• SF Symbols 不是通过传统的 .woff 或 .woff2 字体文件提供的，而是作为软件包提供的，包含了图标和用于在 Apple 平台上使用这些图标的工具。
• 主要用于 iOS、macOS、watchOS 和 tvOS 应用程序开发，使用 Swift 和 SwiftUI。对于网页开发，Apple 并没有提供官方的 CDN 或 Web 字体版本的 SF Symbols。
• 网址：https://developer.apple.com/sf-symbols/

常见问题

问：为什么有些字体会获取失败？

答：本工具使用 JavaScript 原生的 fetch 方法来请求字体文件，如果对方服务器做了跨域限制，就会获取失败，此时可以先下载字体到本地，再拖放到工具中。此外，fetch 依赖网络环境，若无法下载，可在浏览器中直接访问字体地址查看错误详情。

问：图标字体和传统的字体有什么区别？

答：图标字体用于显示图标，适用于网页和应用程序的用户界面设计，可以像文字一样被样式化。它们包含各种图标符号，每个符号对应一个字体字符编码。传统字体则用于显示文本字符，如字母、数字和标点符号，主要用于排版和文本显示，字体设计师也会严格按照码位进行字体设计，而图标字体的码位各异，即使码位相同形状也不一样。

问：woff 和 woff2字体的区别？

答：WOFF 和 WOFF2 是两种用于网页的字体格式，主要区别在于压缩效率和性能。WOFF2 使用更先进的 Brotli 压缩算法，比 WOFF 文件更小，加载速度更快，从而提升网页性能。WOFF 在较旧的浏览器中支持更广泛，而 WOFF2 主要被现代浏览器支持。因此，网页设计中通常同时提供这两种格式以确保兼容性。WOFF 是 W3C 的推荐标准，而 WOFF2 是其改进版本，逐渐成为新的标准。

问：如何得到字体里面的字符集？

答：点击右上角的，图标带有csv字样的按钮，此时工具会将字体里面的所有字符集导出。

问：一般提到字体时提起的GB2312是什么？

答：GB2312 包含 6763 个常用汉字，许多字体设计师在设计中文字体时以此为基础。然而，GB2312 覆盖的字符有限，尤其是生僻字和繁体字。这促使了更大字符集的发展，如 GBK 和 GB18030。GBK 收录了 21,886 个汉字和图形符号，其中 "K" 代表 "扩展" 的拼音首字母。GB 18030 兼容 GB2312 和 GBK，共收录汉字 70,244 个。Big5 是用于繁体中文的字符集标准，包含 13,060 个汉字。例如：GB2312不包含人在囧途的“囧”（jiǒng）字，也不含龙行龘龘后面的“龘龘”（dá dá）二字。号称‘消灭豆腐块’的思源黑体则拥有4.4万个码位，甚至支持显示