如何调整.NET计算的文本宽度结果以匹配JavaScript？

我有一段通过Canvas的measureText方法计算文本宽度的JavaScript代码：

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

const myWidth = getTextWidth("Hello", "12px Arial");
// 返回结果：27.345703125

我尝试用C#实现相同功能，但计算结果和JS不一致：

public static double CalcTextWidth(string text, string fontName, float fontSize)
{
    Font font = new (fontName, fontSize);
        
    using Bitmap bitmap = new(1, 1);
    using Graphics graphics = Graphics.FromImage(bitmap);
    SizeF size = graphics.MeasureString(text, font);

    return size.Width;
}

调用示例：

var width = CalcTextWidth("Hello", "Arial", 12);
// 返回结果：42.88

请问如何调整.NET的计算结果，使其与JavaScript的结果一致？

解决方案 #

两者结果差异的核心原因是字体单位不一致和文本测量的默认行为不同，调整方式如下：

public static double CalcTextWidth(string text, string fontName, float fontSize)
{
    // 使用Pixel作为字体单位，与JS的px完全对应
    using Font font = new Font(fontName, fontSize, FontStyle.Regular, GraphicsUnit.Pixel);
    using Bitmap bitmap = new Bitmap(1, 1);
    using Graphics graphics = Graphics.FromImage(bitmap);
    
    // 设置与Canvas对齐的渲染模式
    graphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;
    // 移除MeasureString默认添加的额外留白，匹配Canvas的测量逻辑
    StringFormat measureFormat = StringFormat.GenericTypographic;
    
    SizeF size = graphics.MeasureString(text, font, int.MaxValue, measureFormat);
    return size.Width;
}

调用调整后的方法：

var width = CalcTextWidth("Hello", "Arial", 12);
// 返回结果接近：27.3，与JS的measureText结果一致

关键调整点说明 #

• 字体单位匹配：.NET的Font默认使用**Point（点）**作为单位（1点≈1.333CSS像素），改为GraphicsUnit.Pixel后，fontSize参数直接对应JS中的px值。
• 移除额外留白：StringFormat.GenericTypographic会关闭MeasureString默认添加的左右间距，这部分间距是Canvas的measureText不会计算的。
• 渲染模式对齐：设置TextRenderingHint.AntiAlias让文本渲染逻辑更贴近Canvas的默认行为，减少因渲染算法差异导致的宽度误差。

内容的提问来源于stack exchange，提问作者JudahA