font2svg

一个基于 Vue 3 + TypeScript 的本地字体预览与导出工具。

核心目标：从本地字体库中选择字体，实时生成文本预览，并导出为 SVG 或 PNG。

界面快照

当前功能

• 字体库加载
  • 从 frontend/public/fonts.json 读取字体清单
  • 支持按分类展示字体树
  • 支持收藏字体列表
• 预览控制
  • 勾选字体进入预览
  • 多字体并行预览
  • 预览项可单独勾选用于导出
• 文本输入
  • 输入框支持手动回车换行
  • 自动按每行 45 字换行（保留手动换行）
• 样式控制
  • 字号滑块（10 ~ 500）
  • 文字颜色选择
• 导出
  • 支持导出 SVG
  • 支持导出 PNG（由 SVG 转换）
  • 多项导出自动打包 zip
  • 导出文件名规则：字体名_内容前8字.扩展名

技术栈

• Vue 3
• TypeScript
• Vite
• Pinia
• UnoCSS
• opentype.js
• harfbuzzjs
• jszip

目录说明

• frontend/: 前端应用源码
• frontend/public/fonts/: 前端静态字体目录（由脚本生成）
• frontend/public/fonts.json: 字体清单（由脚本生成）
• font/: 原始字体目录（按分类子目录组织）
• scripts/generate-font-list.py: 生成 fonts.json
• scripts/copy-fonts.py: 复制字体到 frontend/public/fonts

环境要求

• Node.js 18+
• pnpm 8+
• Python 3（用于字体准备脚本）

快速开始

1. 安装依赖

pnpm -C frontend install

2. 准备字体

将字体放入如下结构：

font/
  手写/
    字体A.ttf
  黑体/
    字体B.otf

然后执行：

pnpm run prepare-fonts

该命令会：

1. 扫描 font/ 生成 frontend/public/fonts.json
2. 复制字体到 frontend/public/fonts/

3. 启动开发环境

pnpm run dev

默认由 Vite 启动前端开发服务。

常用命令

# 启动开发
pnpm run dev

# 构建（调用 frontend build）
pnpm run build

# 本地预览构建产物
pnpm run preview

# 重新生成字体清单并复制字体
pnpm run prepare-fonts

导出行为说明

• 单个选中项：直接下载对应文件（svg 或 png）
• 多个选中项：打包 zip 下载
  • SVG: font2svg-svg-export.zip
  • PNG: font2svg-png-export.zip
• 导出前会自动清理失效选中项，避免导出已不在当前预览列表中的字体

文本布局说明

• 输入文本会先做换行标准化（\r\n -> \n）
• 每行超过 45 字会自动分行
• SVG 高度按字形真实边界计算，不额外添加内置 padding

旧脚本说明

仓库仍保留 pic2svg.py / font2svg.py 等 Python 脚本，用于历史流程或离线转换；当前主交互流程以上述 frontend/ Web 应用为准。