简介面向站长、前端开发者与需要快速上线字体类工具站点的团队这份在线艺术字体转换系统源码采用dedecms织梦内核定制内置全站数据与演示内容可一键部署成炫酷的在线字体生成平台也能自行添加字体满足个性化需求。压缩包内共2000个文件约696.71MBphp、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负责渐变填充shadowColorshadowBlurshadowOffsetY负责发光和立体投影。还有一个容易被忽视的是ctx.letterSpacing现代 Chrome 和 Firefox 支持直接设字间距但 Safari 部分版本不支持生产环境要做降级处理。原语对应特效关键属性常见取值坑fillText底色/渐变填充fillStyle渐变对象必须新创建复用已绑定的渐变不会重绘strokeText描边/描边发光lineWidth、strokeStyle先 stroke 再 fill描边宽度会向两侧扩展阴影霓虹光/立体投影shadowBlur、shadowOffsetYshadowBlur过大在低端机上掉帧严重letterSpacing松散标题感ctx.letterSpacingSafari 不支持时退回手动逐个字符绘制记住一个绘制顺序先画阴影再描边最后填充。因为shadowBlur对描边和填充都会生效先描边会强化轮廓光最后填充则保证文字主体清晰。2.3 字体加载链路font-face 与 Font Loading API要让用户上传的字体在 Canvas 里真正生效必须走完“注册字体 → 触发加载 → 等待 ready → 绘制”这条链路。注册动态字体用FontFaceconst face new FontFace(MyFont, url(/fonts/xxx.woff2)); await face.load(); document.fonts.add(face);逻辑说明FontFace构造函数的第二个参数是字体资源 URLface.load()返回 Promise字体文件下载并解析成功后document.fonts.add(face)把它注册到字体集合里。这里有个容易错的点注册完成不代表布局系统已经使用它接下来绘制前还要调一次document.fonts.load(16px MyFont, text)用准备渲染的文本把字形真正拉进缓存。参数说明第一个参数是带 font-family 的 CSS font 简写字号写 16px 即可它只是触发加载的占位真正绘制时在ctx.font里设置目标字号。如果省掉这一步Canvas 在绘制瞬间可能拿到的是“未加载完”的字形渲染结果直接回退。2.4 最小可运行的前端渲染原型下面是一段能直接跑起来的原型只依赖浏览器原生能力适合验证“字体 → Canvas → 下载”的闭环input typetext idtext value炙热 / canvas idstage width900 height300/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 的真实签名是十六进制00010000OTF 是4F544F4FASCII 的 OTTOWOFF2 是774F4632。这样即使有人把 exe 改名成.ttf也会在格式检查阶段被拦下。sha1是对文件内容做摘要同一字体重复上传时直接复用已存文件既去重又避免覆盖同名文件。参数说明limits.fileSize设在 20MB 是因为一个完整中文字体文件常见的 815MB20MB 给足余量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、ItalicunitsPerEm是字体设计单位与像素的换算基准导出高清图时计算字号比例会用到。参数说明这三个字段在绝大多数 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标题字、奖状字霓虹发光shadowColorshadowBlur颜色#00e5ffblur 18夜场海报、直播标题立体字先fillText深色偏移再fillText基色偏移(3, 3)基色在上层按钮、牌匾描边字strokeTextlineWidth白色描边 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 xmlnshttp://www.w3.org/2000/svg viewBox0 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在服务端只保留用户实际用到的字符生成一个精简的 woff2const 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 个汉字的标题子集后通常只有 2060KB。参数说明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-age604800后端和 SW 双层缓存才能把往复请求彻底消掉。本文还有配套的精品资源点击获取
