126 lines
2.6 KiB
Markdown
126 lines
2.6 KiB
Markdown
# 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`: 字体清单（由脚本重建）
|
||
- `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 应用为准。
|