# font2svg

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

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

## 界面快照

![snapshot](frontend/src/assets/snapshot.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`: 字体清单（由脚本重建）
- `scripts/generate-font-list.py`: 扫描 `frontend/public/fonts` 并生成 `fonts.json`

## 环境要求

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

## 快速开始

### 1. 安装依赖

```bash
pnpm -C frontend install
```

### 2. 准备字体

将字体放入如下结构：

```text
frontend/public/fonts/
  手写/
    字体A.ttf
  黑体/
    字体B.otf
```

然后执行：

```bash
pnpm run prepare-fonts
```

该命令会扫描 `frontend/public/fonts/` 并重新生成 `frontend/public/fonts.json`。

### 3. 启动开发环境

```bash
pnpm run dev
```

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

## 常用命令

```bash
# 启动开发
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 应用为准。