无需登录 数据私有 本地保存

图标字体生成器 - SVG转自定义Webfont

18
0
0
0
拖拽SVG文件到此处

或点击选择文件 · 支持多个SVG · 单个≤500KB

图标列表
0 个图标

尚未添加图标，请上传SVG文件

字体设置
待生成 请先上传SVG图标并点击生成
实时预览
32px
生成字体后将在此处预览
CSS代码
/* 生成字体后将自动显示CSS代码 */
常见问题与知识点
什么是图标字体（Webfont）？
图标字体是一种将矢量图标编码为字体文件（如TTF、WOFF）的技术。每个图标对应一个Unicode字符，通过CSS的@font-face加载后，可以像文字一样使用图标——设置颜色、大小、阴影等，且在任何分辨率下都保持清晰。FontAwesome、Material Icons都是经典案例。
SVG转字体有什么优势？
① 减少HTTP请求——合并多个SVG为单一字体文件；② 统一管理——通过CSS类名调用图标，便于维护；③ 灵活样式——使用color、font-size、text-shadow等CSS属性自由调整；④ 兼容性好——现代浏览器均支持@font-face；⑤ 文件体积小——相比多个独立SVG，字体文件经过压缩后更小。
为什么我的SVG转换后显示为实心方块？
这通常是因为SVG图标使用了stroke（描边）而非fill（填充）来绘制。字体渲染只识别路径的填充区域，stroke会被忽略。解决方案：在矢量编辑软件（如Illustrator、Figma、Inkscape）中使用"轮廓化描边/Outline Stroke"功能，将stroke转换为fill路径后再导出SVG。
Unicode Private Use Area（私用区）是什么？
Unicode标准中预留了私用区（PUA，码点范围U+E000–U+F8FF），这些码点不会被任何标准字符占用，专门供自定义用途。图标字体通常将图标映射到PUA码点，避免与常规文字冲突。本工具默认从U+E000开始分配码点。
生成的字体支持哪些浏览器？
TTF格式在所有主流浏览器中均获支持：Chrome 4+、Firefox 3.5+、Safari 3.1+、Edge 12+、Opera 10+，以及iOS Safari和Android Browser。覆盖率达98%以上。如需更优压缩，可将TTF进一步转换为WOFF2格式（可使用在线工具如Transfonter）。
如何修改图标颜色和大小？
图标字体的最大优势就是可以像文字一样设置样式。使用CSS即可：
.icon-home { color: #ff6b6b; font-size: 32px; text-shadow: 0 2px 4px rgba(0,0,0,.2); }
还可以使用渐变、动画等高级CSS特性。
上传的SVG文件有什么要求？
建议：① 使用fill路径而非stroke；② viewBox尺寸统一（如0 0 24 24）；③ 单个文件≤500KB；④ 路径简洁、无复杂嵌套；⑤ 移除不必要的元数据、注释。对于stroke图标，请先在矢量软件中执行"轮廓化描边"操作。
🔧 相关工具