📖 在线图标字体生成器：自定义Web字体解决方案
图标字体是Web开发中替代图片图标的轻量级方案，通过Unicode映射矢量图形，具有体积小、颜色可控、分辨率无关等优势。ng.cc推出的在线图标字体生成器基于Font Awesome 6免费图标库，支持您从150+图标中自由选择，自定义字体名称、CSS前缀，一键生成WOFF2/WOFF/TTF/EOT/SVG全格式Web字体文件。所有处理均在浏览器本地完成，无需上传，保护您的项目配置隐私。
🎯 150+ 免费图标
涵盖UI界面、社交媒体、设备、文件、编辑器等5大分类。Font Awesome 6风格，兼容主流图标语义。
📦 5种字体格式
WOFF2/WOFF/TTF/EOT/SVG全格式生成，覆盖所有现代浏览器及IE兼容需求。
⚡ 实时CSS/CDN
自动生成@font-face规则和图标样式，支持自定义字体名称/CSS前缀，实时预览CDN链接。
🔒 本地生成
纯JavaScript实现，图标库、字体配置完全在浏览器内存中处理，0网络请求。
🎯 图标字体应用场景
- 📱 移动端H5：使用WOFF2格式，极小体积，快速加载。
- 💻 管理后台：自定义企业级图标库，统一视觉风格。
- 🎨 UI组件库：为Vue/React组件库定制专属图标字体。
- 📄 静态网站：避免加载完整Font Awesome，仅打包使用到的图标。
- 🔄 旧项目迁移：将PNG雪碧图替换为矢量字体图标。
💡 字体格式说明
- WOFF2：压缩率最高的现代格式，推荐首选。浏览器支持率95%+。
- WOFF：广泛兼容的压缩格式，作为WOFF2的回退方案。
- TTF：TrueType格式，macOS/Linux原生支持，Windows需安装。
- EOT：仅用于IE6-IE11，如无需兼容可取消勾选。
- SVG：仅用于旧版iOS Safari，现代浏览器已废弃。
❓ 常见问题解答
❓ Q1：本工具能生成真实的TTF/WOFF文件吗？
本工具为纯前端演示版本，生成的是字体配置说明文件和CSS代码。实际TTF/WOFF2字体文件生成需要服务器端字体编译工具（如FontForge、Glyphs）。您可以通过导出配置，在本地使用专业字体工具编译。我们计划在2.0版本集成WebAssembly字体编译器，实现完全在线的字体文件生成。
❓ Q2：如何将我选择的图标部署到生产环境？
推荐工作流：1. 在本工具选择图标 → 2. 导出配置JSON → 3. 使用IcoMoon、FontForge等工具导入配置 → 4. 生成真实字体文件 → 5. 上传到CDN。本工具生成的CSS代码可直接使用，只需将字体文件路径替换为实际URL。
❓ Q3：CDN链接可以真正使用吗？
cdn.ng.cc 是示例域名，您需要将生成的字体文件和CSS文件上传到您自己的CDN或静态服务器。我们提供完整的URL格式模板，复制后替换为您实际的部署地址即可。
❓ Q4：支持上传自定义SVG图标吗？
当前版本基于内置图标库，不支持SVG上传。自定义SVG转字体需要解析矢量轮廓，技术复杂度较高。我们已在路线图中规划此功能。
❓ Q5：Unicode编码冲突怎么办？
本工具使用Font Awesome的官方Unicode码位（如f015），与主流图标字体不冲突。如果您在同一项目中使用多个图标字体，可通过CSS前缀（.ng-）隔离，避免样式覆盖。
❓ Q6：图标使用商业用途有版权问题吗？
本工具图标库来源于Font Awesome 6 Free，采用CC BY 4.0 + SIL OFL 1.1双重许可。您可以自由用于商业项目，但需保留版权声明（在项目中添加Font Awesome归属）。详情请查阅Font Awesome官方授权。
🔗 关联工具推荐
本工具是ng.cc开发者工具箱前端资源系列的一员，您可能还需要：
⚡ 所有图标选择均在浏览器本地完成，您的配置不会上传至任何服务器。