gavin/font2pic

Fork 0

Files

douboer 0f5a7f0d85 update at 2026-02-08 18:28:39

2026-02-08 18:28:39 +08:00

3.7 KiB

Raw Blame History

使用说明

本文覆盖两类使用方式：

Web 应用（推荐）：frontend/ 图形界面
微信小程序：miniprogram/ 移动端图形界面
Python CLI：font2svg.py / pic2svg.py

1. Web 应用

1.1 安装依赖

pnpm -C frontend install

1.2 准备字体

将字体放入：frontend/public/fonts/，支持多级目录，例如：

frontend/public/fonts/
  书法/
    字体A.ttf
  黑体/
    字体B.otf

执行清单生成：

pnpm run prepare-fonts

该命令会重建：frontend/public/fonts.json

1.3 启动与构建

pnpm run dev
pnpm run build
pnpm run preview

默认开发端口：5174。

1.4 页面操作

左侧字体区搜索/勾选字体进入预览。
可点击收藏按钮加入“已收藏字体”。
顶部设置字号、颜色、输入内容。
右侧预览区点击条目可切换导出选择。
点击导出 SVG 或 PNG。

导出规则：

单个条目：直接下载
多个条目：自动打包 ZIP
文件名：字体名_文本前8字符.扩展名

2. 微信小程序

2.1 字体清单准备

pnpm run prepare-fonts

该命令会同时更新：

frontend/public/fonts.json
miniprogram/assets/fonts.json

2.2 启动方式

打开微信开发者工具。
导入目录：miniprogram/。
在小程序后台配置合法域名（request 和 downloadFile 均需配置 https://fonts.biboer.cn）。
在服务器启动渲染 API：

python3 apiserver/server.py --host 0.0.0.0 --port 9300 --static-root /home/gavin/font2svg

Nginx 配置 /api/ 反代到 http://127.0.0.1:9300。
编译并预览。

2.3 页面操作

首页输入文本，选择字体，调整字号/颜色/字间距。
预览区实时显示 SVG 结果。
点击“导出 SVG 并分享”可生成文件并转发到聊天。
点击“导出 PNG 到相册”可保存图片到系统相册。

2.4 小程序检查命令

pnpm run mp:syntax
pnpm run mp:lint
pnpm run mp:test

3. Python CLI

2.1 安装依赖

pip install -r requirements.txt

pic2svg.py 还需要 potrace：

brew install potrace

2.2 字体转 SVG（font2svg.py）

python font2svg.py --font path/to/font.ttf --text "Hello"
python font2svg.py --font path/to/font.ttf --text "你好" --outdir output
python font2svg.py --font path/to/font.ttf --text "Hello" --letter-spacing 20
python font2svg.py --fontdir font --text "星程紫微" --outdir svg

参数：

--font：单个字体文件（ttf/otf）
--fontdir：字体目录（批量处理）
--text：必填，渲染文字
--outdir：输出目录，不传则输出到当前目录
--letter-spacing：字距（字体单位）

2.3 图片转 SVG（pic2svg.py）

python pic2svg.py images/your_image.png
python pic2svg.py images/your_image.png --outdir output/
python pic2svg.py --indir images --outdir output

常用参数：

--threshold：固定阈值（0-255），默认 Otsu
--turdsize：噪点抑制阈值
--opttolerance：曲线优化容差
--unit：坐标量化单位
--optimize-curves：启用曲线优化
--circle-fit：圆拟合误差阈值

4. 常见问题

Q1：前端看不到字体？

按顺序检查：

字体是否放在 frontend/public/fonts/
是否执行了 pnpm run prepare-fonts
frontend/public/fonts.json 是否包含对应条目

Q2：导出 PNG 失败？

通常是浏览器内存或 SVG 内容异常导致，建议：

降低字号后重试
先导出 SVG 验证生成是否正常
分批导出而不是一次全选过多字体

Q3：`pic2svg.py` 提示找不到 potrace？

安装后确认：

which potrace

3.7 KiB Raw Blame History Unescape Escape