# 测量任何文本的精确像素宽度
您的文本是否超出了容器？在渲染标题之前需要知道它占用了多少空间？浏览器 Canvas API 允许您以像素级精度测量任何文本字符串的精确宽度，而无需将其渲染到 DOM 中。# 为什么只计算字符数是不够的
现代字体是比例字体：每个字形都有不同的宽度。一个“W”占用的空间可能是“i”的三倍。字符数无法告诉您文本实际占用的视觉空间。- 网页设计：防止按钮、标签和表格单元格中的文本溢出。
- SEO：搜索引擎是按像素而不是字符截断标题。
- Canvas 和 PDF：在以编程方式绘制文本之前计算精确位置。
- 工具提示和气泡：根据内部文本动态调整容器大小。
# Canvas 测量如何工作
Canvas API 的ctx.measureText() 方法会返回一个 TextMetrics 对象，其中的 width 属性反映了使用当前有效字体时的 CSS 像素宽度。该工具在测量之前会根据您选择的字体、大小、字重和样式配置上下文。const ctx = document.createElement('canvas').getContext('2d');ctx.font = '700 16px Inter, system-ui, sans-serif';const width = ctx.measureText('你好，世界').width; // 例如 74.5