精确测量多语言文本宽度

测量包含中英文等多种字符的文本宽度是许多应用场景中的常见需求，特别是在UI布局、打印排版或图形绘制时。以下是几种精确测量文本宽度的方法：

1. 使用Canvas API (浏览器环境)

function getTextWidth(text, font) {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    context.font = font || getComputedStyle(document.body).font;
    return context.measureText(text).width;
}

// 使用示例
const width = getTextWidth("你好Hello", "14px Arial");
console.log(width);

2. 使用DOM元素测量

function getTextWidth(text, font) {
    const span = document.createElement('span');
    span.style.visibility = 'hidden';
    span.style.whiteSpace = 'nowrap';
    span.style.font = font || getComputedStyle(document.body).font;
    span.textContent = text;
    document.body.appendChild(span);
    const width = span.offsetWidth;
    document.body.removeChild(span);
    return width;
}

3. 服务器端测量 (Node.js)

const { createCanvas } = require('canvas');

function getTextWidth(text, font = '14px Arial') {
    const canvas = createCanvas(200, 200);
    const ctx = canvas.getContext('2d');
    ctx.font = font;
    return ctx.measureText(text).width;
}

4. 移动端/原生应用测量

Android

Paint paint = new Paint();
paint.setTextSize(textSize);
float width = paint.measureText(text);

iOS (Swift)

let text = "你好Hello" as NSString
let size = text.size(withAttributes: [.font: UIFont.systemFont(ofSize: 14)])
let width = size.width

注意事项

1. 字体影响：确保测量时使用的字体与实际显示的字体一致
2. CSS样式：letter-spacing、word-spacing等CSS属性会影响文本宽度
3. 国际化字符：某些复杂脚本(如阿拉伯语、泰语)可能需要特殊处理
4. 性能考虑：频繁测量时考虑缓存结果

高级场景处理

对于更复杂的文本布局需求(如换行、多段落等)，可以使用更专业的库：

• 浏览器环境：TextMetrics API
• Node.js：opentype.js 用于精确的字体度量
• Java：Apache PDFBox 用于PDF中的文本测量

选择哪种方法取决于您的具体应用场景和性能需求。