Canvas 文本渲染必须用完整 font 字符串（如"16px Arial"），不可拆分设置；单位推荐 px，字号影响布局与清晰度；中文需多字体回退；修改 font 后须重绘。
Canvas 中的文本渲染依赖 font 属性，它不是多个独立属性的组合，而是一个类似 CSS 字体声明的**单字符串值**，必须一次性完整设置，否则可能回退到浏览器默认（通常是 10px sans-serif）。
font 属性必须写全，不能只设字号或字体名
Canvas 的 context.font 不支持像 CSS 那样分写 fontSize 或 fontFamily。你得用一条字符串声明全部关键信息，格式为：
-
字号 + 单位 + 字体族（最简可用形式，如
"16px Arial"） - 可选加入 字体粗细（
normal/bold/700）和样式（normal/italic），顺序为："bold italic 18px 'Helvetica Neue'" - 单位必须明确：推荐用
px（像素），em和rem在 Canvas 中无效；pt、cm等虽语法合法但极少使用且兼容性不稳
字号直接影响文本清晰度和布局位置
Canvas 文本没有自动换行、基线对齐也不直观。字号不仅决定大小，还影响 fillText() 的垂直定位：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
ctx.textBaseline = "alphabetic"（默认）时，传入的y坐标大致对齐小写字母“x”的底部，但实际会受字体度量影响 - 若需精确控制（比如让文字垂直居中于某区域），建议用
ctx.measureText(text).width获取宽度，并结合ctx.font对应字体的actualBoundingBoxAscent/actualBoundingBoxDescent（需 Chrome 84+、Firefox 91+）做微调 - 小字号（如 ≤12px）在非高清屏上容易发虚，可考虑用
ctx.scale(2, 2)放大画布再反向缩放坐标，提升渲染精度
字体族要兼顾可用性与回退机制
Canvas 不会加载网络字体（除非已通过 @font-face 预加载并确保渲染完成），指定不存在的字体将静默降级为系统默认：
- 推荐写法：
"14px -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif" - 中文优先场景可加常见中文字体：
"15px 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif" - 避免只写
"14px SimSun"—— Windows 可能有，macOS/Linux 很可能无此字体，直接掉到sans-serif
动态修改 font 后需重新调用绘制方法
改变 ctx.font 不会重绘已有文本，只影响后续的 fillText() 或 strokeText() 调用：
- 常见错误：先设
font = "12px A"绘一次，再改font = "18px B"却忘记再次调用fillText()，结果仍是旧样式 - 批量渲染不同字号文本时，建议封装函数，每次传入
text、size、family，内部统一设置 font 并绘制 - 调试技巧：打印
ctx.font当前值，确认是否被意外覆盖（比如被其他库或全局样式干扰）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
