diff --git a/README.md b/README.md
index df47d72..f1c08eb 100644
--- a/README.md
+++ b/README.md
@@ -1,136 +1,130 @@
-# 图片转SVG工具
+# font2svg
 
-将图片中的黑色部分提取并转换为高保真 SVG，基于 `potrace` 描边以保证准确还原。
+一个基于 Vue 3 + TypeScript 的本地字体预览与导出工具。
 
-## 功能特点
+核心目标：从本地字体库中选择字体，实时生成文本预览，并导出为 `SVG` 或 `PNG`。
 
-- 自动提取黑色区域（Otsu 自动阈值）
-- 透明通道白底合成，避免边缘污染
-- `potrace` 高精度矢量化，支持孔洞
-- 默认保真优先（关闭曲线优化）
-- 支持圆拟合简化（近似圆轮廓可替代为圆弧）
+## 界面快照
 
-## 安装依赖
+![snapshot](frontend/assets/snapshot.png)
 
-```bash
-pip install -r requirements.txt
-```
+## 当前功能
 
-### 安装 potrace（必需）
-
-```bash
-brew install potrace
-```
-
-### 字体转SVG依赖
-
-用于 `font2svg.py`（字形轮廓输出）：
-
-```bash
-pip install fonttools uharfbuzz
-```
-
-## 使用方法
-
-### 基本用法
-
-```bash
-python pic2svg.py input.png
-```
-
-这将在同一目录生成 `input.svg` 文件。
-
-### 指定输出目录
-
-```bash
-python pic2svg.py input.png --outdir svg
-```
-
-### 常用参数示例
-
-```bash
-# 使用固定阈值
-python pic2svg.py input.png --threshold 128
-
-# 保真优先（默认参数）
-python pic2svg.py input.png --turdsize 0 --opttolerance 0 --unit 1
-
-# 文件更小（可能略失真）
-python pic2svg.py input.png --optimize-curves --opttolerance 0.2
-
-# 圆拟合简化（仅当轮廓接近圆时生效）
-python pic2svg.py input.png --circle-fit 0.02
-
-# 批量转换（输入目录）
-python pic2svg.py --indir images --outdir svg
-```
-
-### 字体转SVG（新脚本）
-
-```bash
-python font2svg.py --font path/to/font.ttf --text "Hello"
-python font2svg.py --font font/XCDUANZHUANGSONGTI.ttf --text "星程紫微" --outdir svg
-python font2svg.py --font path/to/font.ttf --text "Hello" --letter-spacing 20
-python font2svg.py --fontdir font --text "星程紫微" --outdir svg
-```
-
-说明：单字体输出文件名根据 `--text` 自动生成；使用 `--fontdir` 时会加上字体名作为前缀。
-
-## 参数说明
-
-| 参数 | 说明 | 默认值 |
-|------|------|--------|
-| `input` | 输入图片路径（必需） | - |
-| `--indir` | 输入目录（批量转换） | - |
-| `--outdir` | 输出目录（自动创建，使用输入文件名.svg） | - |
-| `--threshold` | 固定阈值（0-255），未设置则使用Otsu | - |
-| `--turdsize` | 抑制噪点面积阈值（potrace -t） | 0 |
-| `--opttolerance` | 曲线优化容差（potrace -O） | 0.0 |
-| `--unit` | 坐标量化单位（potrace -u） | 1 |
-| `--optimize-curves` | 启用曲线优化（更小但可能略失真） | 关闭 |
-| `--circle-fit` | 圆拟合误差阈值（相对半径），>0启用圆替代 | 0.0 |
-
-### font2svg 参数说明
-
-| 参数 | 说明 | 默认值 |
-|------|------|--------|
-| `--font` | 字体文件路径（ttf/otf） | - |
-| `--text` | 文字内容 | - |
-| `--outdir` | 输出目录（自动创建） | - |
-| `--letter-spacing` | 字距（字体单位） | 0 |
-| `--fontdir` | 字体目录（遍历ttf/otf） | - |
-
-## 批量转换
-
-```bash
-python pic2svg.py --indir images --outdir output
-```
-
-## 工作原理
-
-1. 读取图像，透明通道白底合成
-2. 灰度化 + Otsu 反色二值化
-3. 若启用 `--circle-fit`，先尝试圆拟合替代
-4. 写入 PBM 位图
-5. `potrace` 描边生成 SVG（圆拟合失败时回退）
-
-## 故障排除
-
-**细节缺失或断裂**：降低 `turdsize`，关闭 `--optimize-curves`，必要时设置更合适的 `--threshold`。
-
-**文件过大**：开启 `--optimize-curves` 或适当增大 `--opttolerance`。
-
-**边缘毛刺**：尝试调整 `--threshold`，或先对原图做轻微去噪。
-
-**圆拟合过于粗糙**：减小 `--circle-fit` 或关闭圆拟合。
+- 字体库加载
+  - 从 `frontend/public/fonts.json` 读取字体清单
+  - 支持按分类展示字体树
+  - 支持收藏字体列表
+- 预览控制
+  - 勾选字体进入预览
+  - 多字体并行预览
+  - 预览项可单独勾选用于导出
+- 文本输入
+  - 输入框支持手动回车换行
+  - 自动按每行 45 字换行（保留手动换行）
+- 样式控制
+  - 字号滑块（10 ~ 500）
+  - 文字颜色选择
+- 导出
+  - 支持导出 `SVG`
+  - 支持导出 `PNG`（由 SVG 转换）
+  - 多项导出自动打包 zip
+  - 导出文件名规则：`字体名_内容前8字.扩展名`
 
 ## 技术栈
 
-- Python 3.6+
-- OpenCV / NumPy
-- potrace
-- fonttools / uharfbuzz
+- `Vue 3`
+- `TypeScript`
+- `Vite`
+- `Pinia`
+- `UnoCSS`
+- `opentype.js`
+- `harfbuzzjs`
+- `jszip`
 
-## License
+## 目录说明
 
-MIT
+- `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. 安装依赖
+
+```bash
+pnpm -C frontend install
+```
+
+### 2. 准备字体
+
+将字体放入如下结构：
+
+```text
+font/
+  手写/
+    字体A.ttf
+  黑体/
+    字体B.otf
+```
+
+然后执行：
+
+```bash
+pnpm run prepare-fonts
+```
+
+该命令会：
+
+1. 扫描 `font/` 生成 `frontend/public/fonts.json`
+2. 复制字体到 `frontend/public/fonts/`
+
+### 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 应用为准。
diff --git a/frontend/assets/snapshot.png b/frontend/assets/snapshot.png
new file mode 100644
index 0000000..ad83cdd
Binary files /dev/null and b/frontend/assets/snapshot.png differ