精确测量混合文本宽度解决方案

测量包含中文、英文、数字和特殊字符的混合文本宽度需要考虑不同字符集的宽度特性。以下是几种可靠的实现方法：

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

function getTextWidth(text, fontStyle = '14px sans-serif') {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    context.font = fontStyle;
    return context.measureText(text).width;
}

// 使用示例
const width = getTextWidth("你好Hello123!@#");
console.log(width);

2. 使用DOM元素测量 (浏览器环境)

function getTextWidth(text, fontStyle = '14px sans-serif') {
    const span = document.createElement('span');
    span.style.cssText = `
        position: absolute;
        visibility: hidden;
        font: ${fontStyle};
        white-space: nowrap;
    `;
    span.textContent = text;
    document.body.appendChild(span);
    const width = span.offsetWidth;
    document.body.removeChild(span);
    return width;
}

3. Java解决方案 (AWT)

import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Graphics;
import java.awt.image.BufferedImage;

public int getTextWidth(String text, Font font) {
    BufferedImage img = new BufferedImage(1, 1, BufferedImage.TYPE_INT_ARGB);
    Graphics g = img.getGraphics();
    g.setFont(font);
    FontMetrics fm = g.getFontMetrics();
    return fm.stringWidth(text);
}

4. Python解决方案 (PIL/Pillow)

from PIL import ImageFont, ImageDraw

def get_text_width(text, font_path, font_size=14):
    font = ImageFont.truetype(font_path, font_size)
    return font.getlength(text)  # 在Pillow 8.0.0+中使用getlength

# 使用示例
width = get_text_width("你好Hello123!@#", "msyh.ttf")

5. C#解决方案

using System.Drawing;

public float GetTextWidth(string text, Font font) {
    using (var bmp = new Bitmap(1, 1)) {
        using (var g = Graphics.FromImage(bmp)) {
            return g.MeasureString(text, font).Width;
        }
    }
}

注意事项

1. 字体一致性：确保测量时使用的字体与实际显示字体一致
2. 字体回退：混合文本可能需要多个字体回退
3. CSS影响：在Web环境中，letter-spacing、word-spacing等CSS属性会影响宽度
4. 系统差异：不同操作系统可能对同一字体的渲染略有不同
5. 性能考虑：频繁测量时考虑缓存结果

选择哪种方法取决于您的具体应用场景和开发环境。浏览器环境推荐使用Canvas API，服务器端则根据语言选择相应方案。