无需登录 数据私有 本地保存

Canvas 文字适配器 - 测量文本宽度并自动缩放

Canvas 开发工具 Canvas 文本 适配
10
0
0
0
📐

Canvas 文字适配器

测量 · 缩放 · 预览

使用 Canvas measureText API 精确测量文本宽度，自动缩放字体使其完美适配目标宽度。

Arial Times System UI 微软雅黑 PingFang Monospace
📺 实时预览
✓ 适配良好
实际文本宽度
--
渲染字体大小
48px
可用宽度
--
常见问题与知识点
📖 Canvas measureText 原理是什么？

Canvas 2D 上下文的 measureText() 方法返回一个 TextMetrics 对象，其中 width 属性表示文本在当前字体设置下的渲染宽度（单位：CSS像素）。浏览器使用其文字渲染引擎计算宽度，因此结果与实际渲染高度一致。

🎯 测量结果有多精确？

对于大多数现代浏览器，measureText 的精度非常高，误差通常在亚像素级别。但需要注意的是，不同操作系统和浏览器的字体渲染引擎（如 Windows 的 DirectWrite、macOS 的 Core Text）可能有微小差异（通常 < 1px）。

🔤 字体未加载会影响测量吗？

如果指定的字体未安装在系统中或未通过 @font-face 加载，浏览器会使用 fallback 字体进行测量和渲染。这可能导致测量结果与实际使用目标字体时的宽度不同。建议使用系统安全字体或确保自定义字体已加载完毕后再测量。

📝 多行文本如何处理？

Canvas 本身不支持多行文本绘制。本工具将文本按 \n 分割，逐行使用 measureText 测量，取最宽行的宽度作为整体文本宽度。自动缩放时以最宽行为基准统一缩放，保证所有行都适配目标宽度。

⚙️ 自动缩放算法是怎样的？

缩放比例 = 可用宽度 ÷ 最宽行实际宽度。可用宽度 = 目标宽度 - 左右内边距（各20px）。然后新字体大小 = 原始字体大小 × 缩放比例，并限制在 8px ~ 300px 范围内。"仅缩小"模式只在文本超出时缩放，"仅放大"模式只在文本不足时缩放。

💡 实际应用场景有哪些？

动态海报生成、响应式文字布局、SVG/Canvas 文字排版、水印文字适配、Logo 文字缩放、数据可视化标签、以及任何需要精确控制文字宽度的前端场景。搭配 canvas.toDataURL() 可导出为图片。

🔧 相关工具