简介：面向站长、前端开发者与需要快速上线字体类工具站点的团队，这份在线艺术字体转换系统源码采用dedecms织梦内核定制，内置全站数据与演示内容，可一键部署成炫酷的在线字体生成平台，也能自行添加字体满足个性化需求。压缩包内共2000个文件，约696.71MB，php、htm、html等文件搭建页面结构，gif、png、jpg提供图片素材，js与css负责交互样式，ttf字体文件用于在线转换，并附有完整目录与演示数据，站点结构完整。已有180人学习，适合用于站群复制或独立运营，上线后基本无需更新。源码核心以HTML为主，后台管理仅作辅助，方便二次开发与快速部署，搭配editor、ziti、layout等多套样式文件，能帮助你快速搭建美观大气的艺术字在线生成与转换系统。对于希望快速复制部署或二次开发的站长，这套源码提供了一站式解决方案。
1. 在线字体转换的核心不是“画字”，而是字体管线
做运营海报、字幕条或 H5 标题的人大多遇到过这种尴尬：想在网页里生成一段带渐变、描边、发光效果的艺术字，本地 PS 能搞定，但换成在线工具，要么水印糊脸，要么只能选它预设的十几个字体，想传一个自己买版权的字体进去，找半天没有入口。所谓“在线字体转换文字生成艺术字系统源码”，本质就是一套“用户输入文字 → 选择字体与特效 → 浏览器实时预览 → 导出图片/SVG”的 Web 应用。难点不在 Canvas 画字——fillText最多三行代码，真正的工程量在字体文件的接收、校验、跨域加载和中文字体子集化。这篇文章用 Node.js + Express 做后端，浏览器 Canvas 做渲染，拆一套能落地的方案，覆盖“支持自己添加字体”这条最关键也最容易踩坑的链路。
2. 艺术字系统的渲染原理：Canvas 与字体加载链路
2.1 在线字体转换器选型：为什么把渲染放在浏览器
常见的在线字体转换器有两类实现。一类是后端渲染，用 ImageMagick、Pango 或 OpenGL 在服务器上把文字画成图片再回传，好处是字体环境固定、适合批量出图，坏处是实时预览延迟高、每次调参都要重新请求，而且服务器要预装字体，用户上传的字体还得单独“安装”到系统里，权限和隔离都很麻烦。另一类是前端渲染，浏览器加载@font-face字体后在 Canvas 2D 上绘制，所见即所得，调颜色、改字间距、切特效都在本地完成，导出 PNG 也只是一次toDataURL。艺术字编辑器这种高频交互场景，我没有理由选后端渲染。
不过前端渲染会引入一个必须处理干净的问题：用户上传的字体文件是动态的，不能写死在 CSS 里，必须用 JavaScript 动态注册字体、等字体加载完成后再绘制，否则 Canvas 会用回退字体。还有一个隐蔽的坑是跨域：如果字体放在 CDN 或独立文件服务上，@font-face加载跨域字体需要服务端返回Access-Control-Allow-Origin，缺了这个响应头，Chrome 会直接拒绝字体落地，但控制台报错常常被忽略——表现就是画出来的字“变丑了”。
2.2 Canvas 2D 渲染艺术字的四个绘制原语
艺术字特效无论多花哨，最终都由四个 Canvas 原语组合出来：fillText负责实心填充，strokeText负责描边，createLinearGradient/createRadialGradient负责渐变填充，shadowColor+shadowBlur+shadowOffsetY负责发光和立体投影。还有一个容易被忽视的是ctx.letterSpacing，现代 Chrome 和 Firefox 支持直接设字间距，但 Safari 部分版本不支持，生产环境要做降级处理。
| 原语 | 对应特效 | 关键属性 | 常见取值坑 |
|---|---|---|---|
fillText | 底色/渐变填充 | fillStyle | 渐变对象必须新创建，复用已绑定的渐变不会重绘 |
strokeText | 描边/描边发光 | lineWidth、strokeStyle | 先 stroke 再 fill，描边宽度会向两侧扩展 |
| 阴影 | 霓虹光/立体投影 | shadowBlur、shadowOffsetY | shadowBlur过大在低端机上掉帧严重 |
letterSpacing | 松散标题感 | ctx.letterSpacing | Safari 不支持时退回手动逐个字符绘制 |
记住一个绘制顺序：先画阴影，再描边，最后填充。因为shadowBlur对描边和填充都会生效，先描边会强化轮廓光，最后填充则保证文字主体清晰。
2.3 字体加载链路：@font-face 与 Font Loading API
要让用户上传的字体在 Canvas 里真正生效，必须走完“注册字体 → 触发加载 → 等待 ready → 绘制”这条链路。注册动态字体用FontFace：
const face = new FontFace('MyFont', 'url(/fonts/xxx.woff2)'); await face.load(); document.fonts.add(face);逻辑说明：FontFace构造函数的第二个参数是字体资源 URL，face.load()返回 Promise，字体文件下载并解析成功后，document.fonts.add(face)把它注册到字体集合里。这里有个容易错的点：注册完成不代表布局系统已经使用它，接下来绘制前还要调一次document.fonts.load('16px "MyFont"', text)，用准备渲染的文本把字形真正拉进缓存。
参数说明：第一个参数是带 font-family 的 CSS font 简写，字号写 16px 即可，它只是触发加载的占位；真正绘制时在ctx.font里设置目标字号。如果省掉这一步，Canvas 在绘制瞬间可能拿到的是“未加载完”的字形，渲染结果直接回退。
2.4 最小可运行的前端渲染原型
下面是一段能直接跑起来的原型，只依赖浏览器原生能力，适合验证“字体 → Canvas → 下载”的闭环：
<input type="text" id="text" value="炙热" /> <canvas id="stage" width="900" height="300"></canvas> <script> const ctx = document.getElementById('stage').getContext('2d'); async function draw() { const text = document.getElementById('text').value; await document.fonts.load(`16px "sans-serif"`, text); ctx.clearRect(0, 0, 900, 300); ctx.font = `72px "sans-serif"`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.shadowColor = '#00e5ff'; ctx.shadowBlur = 20; ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; ctx.strokeText(text, 450, 150); ctx.fillStyle = '#0af'; ctx.fillText(text, 450, 150); } draw(); </script>逻辑说明：先清空画布，再设置字体、对齐方式和大小的组合，然后按“阴影 → 描边 → 填充”顺序绘制。textAlign和textBaseline都取居中值，这样(450, 150)正好是画布中心，不用手动计算文字宽度。
参数说明：ctx.font的格式严格遵循 CSS font 简写，字重、字号、family 顺序不能乱；shadowColor要在shadowBlur之前设置，否则部分浏览器可能取上一次的阴影色。这段原型里字体是系统默认的，把它换成后端接口返回的 FontFace URL，就是完整在线字体转换器的前端骨架。
3. 支持用户上传字体的后端：校验、存储与元数据解析
3.1 接收字体上传：签名校验与文件去重
“支持自己添加字体”意味着用户会上传.ttf、.otf、.woff、.woff2四种常见格式。不能只按扩展名放行，因为扩展名可以伪造；也不能把用户文件名直接拼进路径，这是个目录穿越漏洞。用multer的memoryStorage先收进内存，再读文件头部的 magic bytes 判断真实格式：
const express = require('express'); const multer = require('multer'); const { createHash } = require('crypto'); const fs = require('fs'); const router = express.Router(); const upload = multer({ storage: multer.memoryStorage(), limits: { fileSize: 20 * 1024 * 1024, files: 1 } }); router.post('/upload', upload.single('font'), async (req, res) => { if (!req.file) return res.status(400).json({ error: '未收到文件' }); const buf = req.file.buffer; const sign = buf.subarray(0, 4).toString('hex').toUpperCase(); const formatMap = { '00010000': 'ttf', '4F544F4F': 'otf', '774F4632': 'woff2', '774F4646': 'woff' }; const ext = formatMap[sign]; if (!ext) return res.status(422).json({ error: '不支持或已损坏的字体格式' }); const hash = createHash('sha1').update(buf).digest('hex'); const filename = `${hash}.${ext}`; const target = `./fonts/${filename}`; if (!fs.existsSync(target)) await fs.promises.writeFile(target, buf); res.json({ id: filename, url: `/fonts/${filename}` }); });逻辑说明：buf.subarray(0, 4).toString('hex')取文件前四字节，TTF 的真实签名是十六进制00010000，OTF 是4F544F4F（ASCII 的 OTTO），WOFF2 是774F4632。这样即使有人把 exe 改名成.ttf也会在格式检查阶段被拦下。sha1是对文件内容做摘要，同一字体重复上传时直接复用已存文件，既去重又避免覆盖同名文件。
参数说明：limits.fileSize设在 20MB 是因为一个完整中文字体文件常见的 8～15MB，20MB 给足余量；memoryStorage对大字体稍微吃内存，但在单机小规模场景比diskStorage少一次临时写盘，可接受。生产环境如果要抗大并发，改成diskStorage并在流式落盘时做 hash，会复杂一些。
3.2 用 fontkit 提取元数据，生成字体列表
上传只是第一步，前端要展示字体名、字重、样式。字体文件的元数据存在 name table 里，自己解析二进制太费力，用fontkit解析最省事：
const fontkit = require('fontkit'); function extractMeta(buf) { const font = fontkit.create(buf); return { family: font.familyName || '未命名字体', style: font.subfamilyName || 'Regular', postscript: font.postscriptName || '', unitsPerEm: font.unitsPerEm || 1000 }; }逻辑说明：fontkit.create(buf)同步解析字体文件的表结构，familyName是字体家族名（例如“思源黑体”），subfamilyName是字重/样式（Regular、Bold、Italic），unitsPerEm是字体设计单位与像素的换算基准，导出高清图时计算字号比例会用到。
参数说明：这三个字段在绝大多数 TTF/OTF 里都能稳定读到；WOFF 解压后同样可读。极少数从网页抓取的子集字体可能缺 name 记录，这时familyName返回 undefined，代码里降级成“未命名字体”，实际渲染时用文件名作为 CSS font-family 名，功能不受影响。
3.3 字体列表接口与静态文件服务
字体元数据写进内存 Map 或 SQLite，对外提供列表和静态文件两个接口：
router.get('/fonts', (req, res) => { const list = Array.from(fontMap.values()).map(f => ({ id: f.id, family: f.family, style: f.style, url: `/fonts/${f.id}` })); res.json(list); }); router.get('/fonts/:id', (req, res) => { const id = req.params.id; if (!/^[a-f0-9]{40}\.(ttf|otf|woff2|woff)$/.test(id)) { return res.status(400).end(); } res.set('Access-Control-Allow-Origin', '*'); res.set('Content-Type', fontContentType(id)); res.sendFile(path.resolve('./fonts', id)); });逻辑说明：列表接口把内部 Map 展开成前端需要的 JSON，注意只暴露 id、family、style、url，不要暴露服务器路径。静态文件接口先用正则白名单校验id的格式，防止用户传入../之类路径穿越，然后设置跨域头和正确的 Content-Type。
参数说明：fontContentType需要把.ttf映射为font/ttf，.woff2映射为font/woff2。Content-Type 错误时，部分浏览器会拒绝渲染字体并在控制台打印 MIME 类型警告，这是字体突然“失效”的常见原因之一。
3.4 跨域、内存与并发踩坑
这套后端的三个高频坑值得先说清楚。
跨域：前端页面和字体文件很可能不在同一个端口，@font-face加载跨域字体时，字体响应必须带Access-Control-Allow-Origin。最稳妥的做法是在 Express 全局设置app.use((req, res, next) => { res.set('Access-Control-Allow-Origin', '*'); next(); })，而不是只在字体接口设置。
内存：memoryStorage把所有上传文件读进内存，如果同时有几十个用户上传 20MB 字体，Node 进程很容易被顶爆内存。小项目可以接受，但建议加一个全局concurrency-safe的计数器，超过阈值时直接返回 503，让用户稍后重试。
并发去重：上面 hash 落盘的逻辑存在检查后写入的竞态窗口，两个相同请求可能同时走到existsSync的 false 分支。单机量级影响不大，真要严谨就在写入后用原子重命名fs.rename(tmp, target)，由文件系统保证只有一个落盘成功。
4. 艺术字生成的核心参数与导出实现
4.1 多行文字排版：measureText 换行算法
运营文案经常有标题 + 副标题，Canvas 的fillText不会自动换行，必须自己算。基于measureText的逐字累加是最直接的做法：
function wrapText(ctx, text, maxWidth) { const lines = []; let line = ''; for (const ch of text) { if (line && ctx.measureText(line + ch).width > maxWidth) { lines.push(line); line = ch; } else { line += ch; } } if (line) lines.push(line); return lines; }逻辑说明：逐个字符拼接出一句候选行，测量“当前行 + 下一个字符”的宽度，超过maxWidth就把当前行切出去，下一个字符另起一行。中文按单字切分，英文单词会被强制拆开，对艺术字场景多数是可接受的。
参数说明：maxWidth通常是画布宽度减去左右安全边距后的值。如果不想行首出现，。、这类标点，在循环里加一个判断：当ch命中“不可作为行首”的字符集合时，把它附到上一行末尾。大数据量文本下measureText会被高频调用，性能尚可，但如果文本超过几千字，可以用二分查找优化。
4.2 渐变、描边、阴影的参数对照表
特效参数的调法有章可循，下面这张表整理了我常用的默认值和适用范围：
| 特效 | Canvas 实现 | 推荐参数 | 适用场景 |
|---|---|---|---|
| 金色渐变 | createLinearGradient(x0, y0, x1, y1) | 角度 30°，色标#f6d365 → #fda085 | 标题字、奖状字 |
| 霓虹发光 | shadowColor+shadowBlur | 颜色#00e5ff，blur 18 | 夜场海报、直播标题 |
| 立体字 | 先fillText深色偏移，再fillText基色 | 偏移(3, 3)，基色在上层 | 按钮、牌匾 |
| 描边字 | strokeText+lineWidth | 白色描边 2px | 杂志封面 |
| 双层描边 | 放大lineWidth先描，再缩小描 | 外层 6px 深色，内层 2px 浅色 | 综艺字幕条 |
渐变的关键是先确定文字在画布中的实际包围盒，再基于包围盒创建渐变对象。如果按整个画布创建渐变，文字只占中间一小块时，渐变会显得廉价且颜色过渡平缓。
4.3 导出高清 PNG 的 2 倍缩放方案
Canvas 直接toDataURL导出容易糊，原因很直接：CSS 里canvas标签宽 900px，但绘图缓冲区也是 900px，在 Retina 屏上就模糊了。正确做法是让缓冲区尺寸等于逻辑尺寸乘缩放系数：
const scale = 2; canvas.width = 900 * scale; canvas.height = 300 * scale; ctx.scale(scale, scale); ctx.font = '72px "MyFont"'; ctx.fillText(text, 450, 150); canvas.toBlob(blob => { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'art.png'; a.click(); }, 'image/png');逻辑说明：先把画布缓冲区放大到 2 倍，再通过ctx.scale(scale, scale)让后续所有绘图坐标仍按逻辑尺寸计算。这样画出来的字在物理像素上等于原来的 2 倍，导出图片放到海报里也不会虚。
参数说明：scale按目标用途调整，印刷建议 3，屏幕展示 2 足够。download属性触发浏览器下载，注意toBlob的回调是异步的，不要在回调外立即执行URL.revokeObjectURL，否则下载链接会提前失效。
4.4 导出 True SVG：把文字变成矢量路径
SVG 导出比 PNG 复杂，因为直接塞<text>不是真正可移植的艺术字：打开 SVG 的机器没装对应字体时，文字会回退成系统字体。要输出“放到哪里都一样”的预览图，必须把字形轮廓转成 path。用opentype.js解析字体并生成路径：
const opentype = require('opentype.js'); function textToSvgPath(buf, text) { const data = buf.buffer.slice(buf.byteOffset, buf.byteOffset + buf.byteLength); const font = opentype.parse(data); const path = font.getPath(text, 0, 72, 72); return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 300"> <path d="${path.toSVG(2)}" fill="#0af" /> </svg>`; }逻辑说明：opentype.parse接收 ArrayBuffer，能从Buffer里切片出来；getPath(text, x, y, fontSize)把文字按指定起点和字号转成几何轮廓，path.toSVG(2)输出 SVG path 的d数据。渐变、描边效果只需要在<path>上追加fill、stroke、filter属性，用 SVG 标准语法描述。
参数说明：getPath的fontSize是相对字体 unitsPerEm 的绘制大小，上引子里的(0, 72)表示基线坐标，实际排版时需要根据font.getAdvanceWidth(text, fontSize)做水平居中，否则文字会贴着副边。这套方案只适用于 TTF/OTF 字体，WOFF2 需要先用shape解压或交给后端子集化，见下一节。
5. 进阶验证：字体子集化与渲染生效检查
5.1 用 subset-font 把中文字体子集化
一个 15MB 的中文字体直接让浏览器加载，首屏体验极差。使用subset-font在服务端只保留用户实际用到的字符，生成一个精简的 woff2：
const subsetFont = require('subset-font'); const { createHash } = require('crypto'); const fs = require('fs'); async function getSubset(fontPath, text) { const chars = [...new Set(text)].sort().join(''); const key = createHash('sha1').update(`${fontPath}:${chars}`).digest('hex'); const cachePath = `./cache/${key}.woff2`; if (fs.existsSync(cachePath)) return `/cache/${key}.woff2`; const src = await fs.promises.readFile(fontPath); const out = await subsetFont(src, chars, { targetFormat: 'woff2' }); await fs.promises.writeFile(cachePath, out); return `/cache/${key}.woff2`; }逻辑说明：先去重、排序文本中的字符，以保证缓存 key 稳定；subsetFont只保留这些字符的字形轮廓，生成体积小得多的 woff2 文件。缓存路径以“字体文件 + 字符集合”双因子做 sha1，文本变化即产生新子集。一个常用带 30 个汉字的标题，子集后通常只有 20～60KB。
参数说明：targetFormat支持woff2、woff、truetype；如果前端要考虑兼容老浏览器，可以同时生成 woff 和 woff2 两套。注意子集化会丢弃未被搜索的字符，所以不要对整篇长文做子集，只对每个字体的实际渲染文本做。
5.2 三种验证技巧与字体生效检查
字体没加载成功时最典型的症状是“效果图里是宋体但控制台不报错”。可以这样验证在线字体转换器里的字体是否真的渲染成功：
const loaded = document.fonts.check(`72px "${family}"`); if (loaded) { ctx.font = `72px "${family}"`; const w1 = ctx.measureText('炙热').width; ctx.font = '72px sans-serif'; const w2 = ctx.measureText('炙热').width; if (w1 === w2) console.warn('目标字体未生效，宽度与 sans-serif 一致'); }逻辑说明：document.fonts.check只代表浏览器知道这个字体可被使用，不等于 Canvas 调用时一定不回退。所以再做一个宽度对比：不同字体的 advance width 几乎不可能完全一致，如果w1 === w2，说明字体被回退了。这是排查“代码没报错但字不对”时最快的手段。
配合 Service Worker 做字体缓存，可以把切字体、换特效的交互延迟降到接近零：在 SW 的 fetch 事件里拦截/fonts/和/cache/请求，命中CacheStorage直接返回，miss 时fetch后写入缓存，缓存版本号升级时在activate里清理旧 key。记住一条：字体文件的响应头必须带Cache-Control: public, max-age=604800，后端和 SW 双层缓存才能把往复请求彻底消掉。
本文还有配套的精品资源，点击获取
