字体图标神器：在线浏览与导出

前言

在开发项目时，是否遇到过这样的情景：接手一个新的项目，发现项目中引用了一些来源不明的字体图标文件，比如从 Iconfont、Font Awesome 等平台下载的文件，但没有任何文档或说明标注这些文件中的图标内容。开发者通常只能通过项目中已有的使用情况推断出某些图标的用途，或者无奈地反复尝试。与此同时，在开发一些小型项目时，可能只需要某个特定的字体图标，却不得不导入整个庞大的字体文件。

为了解决这一问题，我开发了一个字体文件读取与浏览工具。通过该工具，用户可以上传字体文件，快速浏览其中包含的所有图标，并支持单独导出某个字体为 SVG 格式。这不仅简化了工作流程，也提高了开发效率。

使用指南

访问工具页面： alexpang.cn/reader-font...

打开页面后，你会看到一个简洁的上传框。由于工具并未内置任何字体，因此需要用户自行上传需要解析的字体文件。可以放心，这是一个纯静态页面，上传的字体不会被缓存或传输到服务器，完全保证隐私与安全。

第一步：上传字体文件

在上传框中选择字体文件，例如从项目中导出的字体文件，或者从 Iconfont 平台下载的 .ttf 文件。上传完成后，工具会解析文件并展示其中的所有字体图标。

如下图所示，这是上传 Element Icons 字体文件后的展示效果：

第二步：浏览与选择图标

在字体展示页面中，可以轻松浏览字体文件中包含的所有图标。对于每一个图标，点击它即可进入编辑页面。工具提供了一些简单但实用的功能，例如：修改图标颜色、图标旋转

第三步：导出或复制字体图标

完成编辑后，可以选择以下方式导出字体图标：

下载为 SVG 文件：保存为矢量格式，便于后续在网页中直接使用。
下载为 PNG 文件：保存为位图格式，方便用于设计稿或文档中。
复制 SVG 内容：直接复制图标的 SVG 代码到剪贴板，便于快速嵌入到 HTML 中。

下图展示了点击某个图标后的编辑界面：

实用场景

快速定位项目中未知字体图标

如果项目中包含来源不明的字体文件，通过该工具可以快速浏览和定位图标，避免重复下载或制作。
单独导出某个字体图标

在小型项目中，有时只需要一个图标，而无需引用整个字体文件。通过该工具，可以直接导出单个图标，减少不必要的资源加载。

技术实现

该工具采用了以下关键技术：

字体解析 ：基于 JavaScript 的 opentype.js 库，解析上传的 .ttf 或 .woff 文件，提取字体信息和字形数据。
图标展示与编辑 ：利用 <svg> 元素绘制字体图标，并提供基本的图像变换功能（旋转、颜色调整）。
文件导出：通过浏览器的 Blob API 和 Canvas API，实现 SVG 和 PNG 格式的导出功能。

后续优化

目前，该工具功能简单，但可以进一步优化和扩展，例如：

支持更多字体格式

除了目前支持的 .ttf 和 .woff 文件，还可以添加对 .otf 和 .eot 文件的解析支持。
更多编辑功能

增加对字体图标的更多操作选项，比如形状剪裁、描边宽度调整等。

结语

这款字体浏览工具虽然简单，却解决了一些实际开发中的问题。无论是浏览未知的字体文件，还是快速导出单个字体图标，它都能提高一些效率。如果你有类似需求，可以试一试。