如何使node-canvas与浏览器canvas的measureText文本宽度测量结果一致？

我需要测量文本宽度来调整字号，让文本适配元素。但使用measureText时，Chrome/Electron浏览器端的文本宽度在570-600左右，而node-canvas的测量结果仅为336。设置的最大宽度为360，这导致浏览器端会将字号降至28，而Node端则保持46不变。

Node Canvas实现代码 #

// Node Canvas implementation
var cv = createCanvas(0, 0);
var ctx = cv.getContext('2d');
  
ctx.font = `normal 48px Roboto`;
ctx.fillStyle = '#000000';
ctx.textAlign = 'left';

const measureText = ctx.measureText('Seraphina Aurelia Everhart');
const textWidth = measureText.width;

console.log(textWidth);
// Browser = 570 - 600ish
// Node = 336

解决方法 #

1. 确保Node端正确加载Roboto字体 #

node-canvas默认不会自带Roboto字体，必须手动注册本地字体文件，才能保证渲染和测量逻辑与浏览器一致：

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

// 替换为本地Roboto常规字体文件的实际路径
registerFont('./fonts/Roboto-Regular.ttf', { family: 'Roboto' });

var cv = createCanvas(0, 0);
var ctx = cv.getContext('2d');

ctx.font = `normal 48px Roboto`;
ctx.fillStyle = '#000000';
ctx.textAlign = 'left';

const measureText = ctx.measureText('Seraphina Aurelia Everhart');
console.log(measureText.width);

可以通过console.log(ctx.getFonts())检查已注册的字体列表，确认Roboto已成功加载。

2. 统一字体渲染参数 #

明确指定字体权重（normal对应400权重），避免浏览器和node-canvas对字体参数的默认解析差异：

ctx.font = `400 normal 48px Roboto`;

3. 临时 fallback 方案（绘制后获取宽度） #

如果上述方法仍存在差异，可以通过绘制文本后计算实际宽度作为备选：

const { createCanvas, registerFont } = require('canvas');
registerFont('./fonts/Roboto-Regular.ttf', { family: 'Roboto' });

const targetText = 'Seraphina Aurelia Everhart';
const fontSize = 48;

// 创建足够大的画布容纳文本
const canvas = createCanvas(1000, fontSize * 2);
const ctx = canvas.getContext('2d');

ctx.font = `normal ${fontSize}px Roboto`;
ctx.fillStyle = '#000';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';

// 绘制文本
ctx.fillText(targetText, 0, 0);

// 优先使用measureText获取宽度，若仍有偏差可通过像素检测补全（效率较低）
const textWidth = ctx.measureText(targetText).width;
console.log(textWidth);

使用版本信息 #

Node: 18 LTS
node-canvas: 2.11.2
Serverless offline: 3.31.0
Runtime: Lambda
macOS: 13.4.1

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