★ FEATURED ARTICLE 2. 引言起因是老同学远程求助他手上的一个重要线上活动页面明明代码里写着font-size: 24px但实际渲染出来的文字却小得跟蚂蚁似的怎么调都纹丝不动。排查了一圈发现问题出在Canvas绘制的文本上。这其实是个非常普遍但又特别容易让人抓狂的场景——你做好了图表、海报生成器、签名板、动态水印这类功能结果一段文字的字号死活不听指挥整个页面的视觉效果直接垮掉。Canvas字体管控说白了就是围绕ctx.font这一个属性在打转。它跟普通的HTML/CSS字体设置完全是两条路线CSS靠选择器和层叠规则而Canvas只认你直接喂给它的字符串格式一个地方写错整个字号设定就静默失效。这篇文章我会从Canvas字体设置的基本用法讲起覆盖单位换算、动态缩放、高分屏适配、不同浏览器之间的细节差异、常见报错原因再到几个可以复制粘贴的封装示例。不管你是刚接触Canvas的新手还是在活动页、编辑器项目里被图文导出折腾过的老手这份内容应该能帮你少走很多弯路。在动手写代码之前先坦诚说一句Canvas字体调试很多时候不是“写错”的问题而是“没搞懂规则”的问题。很多时候代码逻辑看起来完全没毛病但渲染结果就是不对。这种挫败感我太熟悉了。把这篇文章看完你会发现自己能少掉一堆头发。3. 基础不牢地动山摇Canvas字体属性到底是个什么结构先把最难啃的骨头讲明白再谈调试技巧。3.1 ctx.font的完整格式拆解Canvas上下文的font属性使用的是一套简化的CSS Font Shorthand语法。一个标准的格式长这样ctx.font font-style font-weight font-size/line-height font-family;把它拆开看就是字体样式italic、oblique或normal字体粗细bold、bolder、lighter也可以是数值100到900或者是normal字号必填项比如16px、1.2rem、10pt行高可以不写但如果要写必须紧跟字号后面用斜杠/连接字体家族必填项多个候选字体用逗号分隔一个合法的写法示例ctx.font bold 48px Microsoft YaHei, sans-serif;有一个非常关键、又最容易踩坑的地方是Canvas的font属性不继承页面上任何一个CSS选择器设定的字体。哪怕你的页面body已经定义了font-family: PingFang SC;Canvas内部的默认字体仍然是10px sans-serif。你有多少次在页面上设置了硕大的字体结果Canvas里画出来就是默认的10像素小字就是栽在这里。注意部分浏览器把Canvas的font属性设置为空字符串时会自动重置为10px sans-serif。这个行为不算统一规范所以不要依赖“清空”来重置要显式地重新赋值一次完整规则。3.2 为什么顺序错了就直接失效Canvas解析font字符串用的是一种相当宽松但又严格有序的语法。它的宽容体现在bold可以写在italic前面、后面或者中间normal可以省略。它的严格体现在字号和字体家族必须存在而且顺序上字号必须在前、字体家族在后。来看看经典的翻车现场// 错误1字体家族放到最前面 ctx.font sans-serif bold 16px; // 结果整条字符串直接解析失败不生效 // 错误2字号和字体家族中间混入多余关键词 ctx.font 16px normal bold Arial; // 结果解析混乱可能静默失败 // 错误3字号单位漏写 ctx.font bold 24 Arial, sans-serif; // 结果字号后面缺少单位直接忽略这一整条设置遇到这类问题开发者常常以为是字号不够大把fontSize变量从24改到48、再改到80结果就是没反应。因为这条灰溜溜的规则根本没有被Canvas接受。3.3 必须存在的两个要素从规范角度理顺一下font属性的语法中只有两样东西是绝不妥协的必填项。字号不写px、pt、em、rem之类的单位直接失败光写一个数字是无效的字体家族可以是具体字体名也可以是serif、sans-serif、monospace这些通用家族名其他所有修饰项比如normal、italic、bold、small-caps写不写都能被正常接受但写错位置也不会报错只是被悄悄忽略。所以如果你的Canvas文字字体、字号完全不受控制第一步检查顺序确保变量的拼接结果里字号永远在字体家族之前中间用空格隔开。4. 单位之谜px、pt、rem、em在Canvas里到底怎么算4.1 不同单位的显示大小差异Canvas支持多种单位这跟CSS几乎一致。但很多人不知道的是这些单位换算完之后视觉大小完全不一样。单位相对基准16px字号的视觉大小说明px像素点16像素最直观最常用pt磅1pt约等于1.333px约21.3像素印刷行业常用PDF导出容易踩坑em相对父元素的font-size需要换算Canvas里没有“父元素”概念相对的是自身继承的默认值rem相对根元素font-size约25.6像素受页面根字号影响百分比相对继承字号需要换算浏览器支持度有差异举一个实际场景你想做一张高清名片导出PNG。设计稿上一行名字用的字体是14pt如果用CSS那套逻辑大多数开发者会直接写成14pt结果发现整体看起来比设计稿偏大了一圈还显得有点憨。这是因为在96dpi的设备上1pt 1.333px14pt约等于18.7px比你预期的14px整整大了4.7个像素。所以做Canvas文字排版的时候我的建议是统一改用px万万不要混用单位。混用带来的偏移误差很难查而且在不同缩放比的屏幕上表现不一致。4.2 屏幕分辨率与DPR对字号的影响这里必须认真展开讲因为这是Canvas文字模糊、字号看起来不对的“罪魁祸首”。在普通屏幕DPR1上16px就对应物理像素16个点。但在Retina屏幕DPR2或更高上如果你直接拿deviceWidth * deviceHeight去设置Canvas的宽高画出来的文字会被拉伸放大两倍看起来就像隔着一层毛玻璃又大又胡。正确的做法是三步走// 1. 获取设备像素比兼容性写法 const dpr window.devicePixelRatio || 1; // 2. 用物理像素创建Canvas保证清晰 canvas.width cssWidth * dpr; canvas.height cssHeight * dpr; // 3. 用CSS像素做坐标运算并在绘制前统一缩放 ctx.scale(dpr, dpr); // 4. 设置字号时直接用CSS像素值 ctx.font 16px Arial;如果你的项目里Canvas文字出现两类问题——一个是模糊得不能看另一个是导出图片后字跟设计稿差了整整一倍——先检查有没有做DPR适配。这跟字体设置本身没有关系但它是“字号看起来不对”的姊妹篇。注意做了ctx.scale(dpr, dpr)之后所有绘制坐标、字号、线宽、阴影偏移全部都要沿用CSS像素值来思考不要再用物理像素否则你会在高分屏上得到偏移半个像素的各种诡异效果。4.3 动态计算字号的时机问题另一个容易翻车的点是字号必须在调用fillText或strokeText之前设置。你以为写一次font就万事大吉但实际上Canvas的font属性是动态状态。如果在绘制途中修改了全局缩放或者重新赋值了font后面的绘制就会用新的字号。项目里画一段多行文本时我习惯先用一个辅助函数测好各行宽度再在fillText前统一设置字号。这种做法算是最稳妥的。5. 实践出真知从动态缩放到自动换行的完整封装理论知识差不多铺垫完了直接来一套可以放到项目里改造的示例代码。5.1 最简配置一行代码改字号需求在Canvas里画一行标题文字字号得跟随画布宽度等比缩放。最直白的实现const canvas document.getElementById(myCanvas); const ctx canvas.getContext(2d); // 基础画布设置 const cssWidth 400; const cssHeight 200; const dpr window.devicePixelRatio || 1; canvas.width cssWidth * dpr; canvas.height cssHeight * dpr; ctx.scale(dpr, dpr); // 动态字号让12px的字在小屏上都够用24px的字在大屏上不至于溢出 const baseFontSize Math.min(24, Math.max(12, cssWidth * 0.05)); // 字体必须包含单位且处于font-family前 ctx.font bold ${baseFontSize}px PingFang SC, Microsoft YaHei, sans-serif; ctx.fillStyle #333333; ctx.textAlign center; ctx.textBaseline middle; ctx.fillText(动态字号示例, cssWidth / 2, cssHeight / 2);这段代码逻辑上没有任何悬念但有几个细节值得拿出来提一下px单位不能丢字号变量最好放在一个专门的函数里算不要在内联字符串里硬编码如果你希望字号根据容器大小缩放Math.min和Math.max做钳位能避免极端值5.2 自动换行不能用CSS的Word-BreakCSS中文本遇到容器边界会自动换行但Canvas的fillText不会。它会把一整段字符串原封不动画出去超出画布边界直接截断不报任何错误。想要按指定宽度自动换行需要自己测量每个字符的宽度。封装一个通用函数function wrapText(ctx, text, maxWidth) { // 按显式换行符切分成段落 const paragraphs text.split(\n); const lines []; for (const para of paragraphs) { // 空段落直接压入空行 if (!para) { lines.push(); continue; } let currentLine ; for (const char of para) { const testLine currentLine char; if (ctx.measureText(testLine).width maxWidth currentLine) { lines.push(currentLine); currentLine char; } else { currentLine testLine; } } if (currentLine) lines.push(currentLine); } return lines; }这里有一个中文文本需要特别留意的点如果按字符逐个累加中文换行基本没有大问题但英文单词会在中间断开。如果你业务需要“单词整体换行”得升级成先按空格分词再拼合判断。但在实际项目里因为Canvas常用于用户签名、海报文案、证件照信息等场景绝大多数中文文本按字符换行就够了。调用示例const lines wrapText(ctx, 这是一段很长的中文文案用来测试Canvas自动换行功能是否正常。, cssWidth - 40); let cursorY 40; for (const line of lines) { ctx.fillText(line, 20, cursorY); cursorY baseFontSize * 1.5; // 行高取1.5倍 }5.3 不同屏幕自适应测量文本宽度后再钳位有时候产品要求文字“尽可能大但不能超出容器”。这时候需要先测量再反推字号。思路很简单二分查找或者从大往小递减查找。考虑到字体渲染要调用measureText每次测量需要一定的计算量所以用二分查找效率会好不少。function fitTextSize(ctx, text, maxWidth, maxHeight, minSize, maxSize, fontFamily) { let low minSize; let high maxSize; let best minSize; const maxIterations 30; // 防止死循环 for (let i 0; i maxIterations; i) { const mid Math.ceil((low high) / 2); ctx.font ${mid}px ${fontFamily}; const textWidth ctx.measureText(text).width; if (textWidth maxWidth mid maxHeight) { best mid; low mid 1; } else { high mid - 1; } } return best; }这个函数有个隐含好处当你在ctx.font里反复改字号测量的时候最后一次设置的font会留下“印记”。所以调用完fitTextSize后要再显式设置一次你想要的实际字体避免画出来的字跟测量时用的大小不一致。具体业务场景里我还习惯把测量封装成单例函数避免每次绘制都要重新创建相同逻辑。这个就看项目复杂度了不必过度设计。6. 避坑手册浏览器差异与兼容性雷区6.1 默认字体的差异不同浏览器对Canvasfont的默认处理是不同的。在主流操作系统上Chrome / Edge 基本都是10px sans-serifFirefox 在Windows上会跟随系统默认字体可能是10px ArialSafari 在macOS上受系统字体影响更大可能是10px -apple-system这就导致同样的代码在Chrome里测试没问题到了Safari里字的渲染宽度和高度都有细微差别。对于普通文字感受不太明显但在设计稿严格对齐的场景里差距不能忽视。为了防止这种环境差异强烈建议约定一个跨平台字体链比如Noto Sans SC, Microsoft YaHei, PingFang SC, sans-serif。这样不同系统会优先命中各自有字重的字体避免全部退回默认。6.2 iOS和Android WebView的字体加载时机移动端WebView里做Canvas文字有个老大难问题自定义字体尚未加载完成时Canvas直接画字可能画出来的是缺字状态。这种问题尤其发生在使用非系统字体做海报生成器时。页面加载了font-face但字体文件还没下载完Canvas绘图已经执行了这个时候Canvas会使用当时可用的字体也就是兜底字体。等字体加载完成后你也不会再重绘一次于是导出的图片上字直接变形。解决这类问题的思路有几个按项目情况选用document.fonts.ready或FontFaceSet.load等待字体加载完成再绘制在字体加载失败时使用系统字体回退不要硬等网络资源如果字体加载过程较长考虑预加载// 等待字体加载完成后绘制以“仅等待指定字体”为例 if (document.fonts document.fonts.load) { await document.fonts.load(bold 16px MyCustomFont); } // 字体加载结束后再开始Canvas绘制 drawCanvas();这个步骤在低端机上会显著提升体验因为低端机的字体加载时间可能长达几百毫秒一等就错过了首屏绘制。6.3 中文引号、emoji和特殊字符的宽度测量Canvas的measureText对中文、数字、字母、emoji的宽度计算并不总是符合直觉。尤其在当前很多设备上emoji通常用彩色字体渲染宽度跟普通文字不同。实测下来的经验如果你绘制的文本里有表情符号想要让整段文字居中或者两端对齐不能简单通过totalWidth / 2计算起点。因为measureText返回的宽度在某些系统上会略小于emoji的真实占用宽度。最稳妥的办法是给特殊字符单独留出缓冲或者干脆限制输入内容。还有一个更隐蔽的坑中文的标点符号在半角和全角之间切换时宽度变化非常明显。比如中文逗号“”和英文逗号“,”它们的字形宽度差别可能达到了一个字符的宽度。这在文本对齐需求强的项目里会造成视觉偏移。我的建议是Canvas排版时统一做一次字符全角化处理或者统一用半角标点不要混排这样measureText计算出的宽度才能稳定可靠。7. 常见问题与排查技巧实录整理一下我实际遇到过的高频问题做成速查表可以直接对照排查。问题现象可能原因解决方案字号改了但显示一直是10pxctx.font语法错误或被静默忽略检查顺序确保字号px 空格 字体家族完整文字变成默认黑体/宋体字体名写错或未加载对应字体换成系统内置字体或用document.fonts.load确保加载完成文字整体模糊未处理devicePixelRatio按DPR扩大Canvas尺寸并ctx.scale(dpr, dpr)文字超出画布被截断没有自动换行逻辑使用自定义换行或控制绘制区域同一行显示大小不一致字体中混用了多种单位或字体加载失败统一使用px确认字体可用文字整体偏移半像素textBaseline / textAlign设置不对检查textBaseline和textAlign组合是否匹配需求Safari下字宽特别大或特别小字体栈无命中回退规则不同设置跨平台字体栈并校验每个候选字体7.1 问题一字号设置后纹丝不动过去有同事遇到一个非常典型的场景ctx.font 20px Helvetica Neue,Helvetica,Arial,sans-serif;但浏览器始终画出10px的默认字。排查后发现他在设置ctx.font之前先执行了ctx.setTransform(2, 0, 0, 2, 0, 0)。在setTransform之后ctx.font的默认状态被重置为初始值。但当时大家以为setTransform只是移动坐标系不应该影响字体。结果冤枉了setTransform半天最后真相是代码里在setTransform之后又执行了一次ctx.font 的操作这对某些浏览器来说会重置成10px默认值。这一点要敲黑板不要随意赋空字符串给ctx.font。想要重置字体就显式地写回一份完整的规则。7.2 问题二导出图片时文字不清晰项目里常见于把Canvas转成Blob再上传的场景。文字模糊多半不是字体本身的问题而是Canvas在DPR2的设备上导出图片时你创建的Canvas宽度设置成了CSS像素尺寸。解决方式已经在上文提过了创建Canvas时考虑canvas.width styleWidth * dpr。导出图片时因为Canvas本身已经包含足够多的物理像素生成的图片就会很清晰。我这里再补充一个小技巧如果你用toDataURL或toBlob导出需要精确控制最终图片尺寸可以先算好缩放比例再手动输出。比如const outputWidth 800; // 目标导出宽度 const scaleFactor outputWidth / canvas.width; const tempCanvas document.createElement(canvas); tempCanvas.width outputWidth; tempCanvas.height canvas.height * scaleFactor; const tempCtx tempCanvas.getContext(2d); tempCtx.drawImage(canvas, 0, 0, tempCanvas.width, tempCanvas.height); const url tempCanvas.toDataURL(image/png);但需要注意这样临时缩放文字必然会有一定程度的失真。如果希望导出图片上的文字也高清最优方案是直接创建目标分辨率的大型Canvas在上面重绘所有内容。但这会增加绘制成本实时预览场景建议不做。7.3 问题三多行文本行高失控Canvas里设置行高的方式不是ctx.lineHeight而是完全依靠你手动控制每一行的y坐标。有些开发者从CSS习惯出发在ctx.font 16px/1.5 Arial里加入行高。这行代码在某些浏览器里可以被解析但实际渲染很多情况下并不会按1.5倍执行行高。最保险的方案是绘制时自己计算const lineHeight fontSize * 1.5; lines.forEach((line, index) { ctx.fillText(line, x, y index * lineHeight); });这样任何诡异的环境都不会影响你的行间距。7.4 问题四中文文本在部分系统上缺字这种多数是因为字体栈里没有覆盖中文的字体。比如你只写了font-family: ArialWindows上还好Arial会自动回退中文到系统字体但某些Linux设备上Arial可能不存在Canvas会直接显示豆腐块。解决方式使用类似Noto Sans CJK SC, Source Han Sans SC, WenQuanYi Zen Hei, Microsoft YaHei, sans-serif这样的中文优先字体栈。另外也要注意字体版本太老的思源黑体在某些系统上缺字。8. 经验杂谈做Canvas文本渲染这几点必须记牢写到这里把多年实战里反复遇到的坑重新梳理一遍当是给你的一份备忘录。8.1 绘制大量文本时的性能优化如果画布里有几十行文字比如一个数据大屏页面每个指标都要用Canvas绘制多个文本标签频繁调用measureText会带来明显的性能开销。measureText每调用一次都要走一次字体的度量计算虽然在现代浏览器上很快但叠加起来仍然会拖慢低性能设备的渲染帧率。最优解法是把需要复用的文本宽度做成缓存。一个粗糙但有效的做法const textMeasureCache new Map(); function getTextWidth(ctx, text, font) { const key font | text; if (textMeasureCache.has(key)) return textMeasureCache.get(key); ctx.font font; const width ctx.measureText(text).width; textMeasureCache.set(key, width); return width; }但如果你的文本内容会频繁变化这个缓存价值就不大了。反而建议把绘制过程整体封装成requestAnimationFrame批量渲染避免在单帧内多次重复测量。8.2 Canvas与CSS混用时最容易踩的字体坑不少项目会在Canvas上叠加一层HTML元素比如用Canvas画画然后用绝对定位的DOM元素显示提示文案。这种情况下浏览器会分别用Canvas的字体渲染和CSS的字体渲染两条路径两者可能在DPI缩放上存在细微差异造成“Canvas上的字和DOM上的字看起来不是同一号”的错觉。一个比较稳妥的做法是要么全部走Canvas要么全部走DOM不要同一屏内混用。如果确实需要混用就统一指定同一套字体栈并确保Canvas的DPR缩放方式跟CSS的缩放方式一致。8.3 Canvas字体调试的终极武器如果实在排查不出来我建议在Chrome DevTools的Console里敲一行let ctx document.querySelector(canvas).getContext(2d); console.log(ctx.font);这一行能瞬间告诉你“实际生效的字体规则是什么”。如果打印出来的不是你想设置的内容那基本都能顺着这条线找到问题。这个手段看着简单但胜在直接。好多看起来玄乎的问题最后都是在这一步现原形。9. 从字体到整体一个可用的小工具函数库最后给一个可copy的完整封装集中解决常见的Canvas文本绘制需求动态字号、自动换行、垂直居中、多行绘制。const CanvasText (function () { function normalizeFont(fontSize, fontFamily, weight normal, style normal) { return ${style} ${weight} ${fontSize}px ${fontFamily}; } function wrapText(ctx, text, maxWidth) { const paragraphs text.split(\n); const lines []; for (const para of paragraphs) { if (!para) { lines.push(); continue; } let currentLine ; for (const char of para) { const testLine currentLine char; if (ctx.measureText(testLine).width maxWidth currentLine) { lines.push(currentLine); currentLine char; } else { currentLine testLine; } } if (currentLine) lines.push(currentLine); } return lines; } function fitTextSize(ctx, text, maxWidth, minSize 12, maxSize 64, fontFamily sans-serif) { let low minSize; let high maxSize; let best minSize; for (let i 0; i 30; i) { const mid Math.ceil((low high) / 2); ctx.font normalizeFont(mid, fontFamily, bold); const width ctx.measureText(text).width; if (width maxWidth) { best mid; low mid 1; } else { high mid - 1; } } return best; } function drawParagraph(ctx, text, x, y, maxWidth, lineHeight, fontSize, fontFamily, weight normal) { ctx.font normalizeFont(fontSize, fontFamily, weight); const lines wrapText(ctx, text, maxWidth); lines.forEach((line, index) { ctx.fillText(line, x, y index * lineHeight); }); return lines.length; } return { normalizeFont, wrapText, fitTextSize, drawParagraph, }; })();使用起来很简单// 1. 设置DPR与画布 const canvas document.getElementById(posterCanvas); const ctx canvas.getContext(2d); const dpr window.devicePixelRatio || 1; const cssW 600; const cssH 400; canvas.width cssW * dpr; canvas.height cssH * dpr; ctx.scale(dpr, dpr); // 2. 动态适配字号 const fontSize CanvasText.fitTextSize( ctx, 今天是个好日子, cssW - 80, 16, 48, PingFang SC, Microsoft YaHei, sans-serif ); // 3. 绘制多行文本 ctx.fillStyle #222; CanvasText.drawParagraph( ctx, 这是一段海报文字用于演示自动换行以及自适应的字体大小控制。, 40, 80, cssW - 80, fontSize * 1.5, fontSize, PingFang SC, Microsoft YaHei, sans-serif );用了这个封装之后项目里大部分Canvas文本排版需求都能直接覆盖。真遇到更细分的需求比如带阴影、带旋转、倾斜透视再单独增加对应的参数扩展即可。10. 写在最后的一点体会我接触Canvas文本绘制也有不短时间了最深刻的一个体会其实是这类问题很少有“灵异事件”大多数坑的根源都是对API规则的细节理解不够扎实。font字符串的顺序、单位的有无、DPR的适配、字体加载的时机这些细节点排查清楚了整个Canvas文字渲染就算掌握了七七八八。如果看完这篇文章你只记住一句话那就是设置ctx.font时务必保证字号带单位、在字体家族前面并且不要在设置后随意赋空字符串。这一条就能避开绝大多数常见问题。实操中如果还遇到正文里没提到的新问题建议先用我讲的“打印ctx.font”大法定位出当前生效的字体规则再回看对应章节排查原因。这套方法目前来看几乎可以覆盖Canvas字体相关的八到九成日常状况。最后再分享一个小技巧遇到Canvas文本效果特别复杂的时候先在纸上手动画一遍坐标草图理清所有绘制基准再动手写代码效率会高很多。
阅读完成 · 觉得有帮助？
