有没有办法在渲染前计算文本宽度？

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

const textWidth = getTextWidth('Hello', '16px Arial');
console.log('文本宽度：', textWidth);

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

const textWidth = getTextWidth('Hello', '16px Arial');
console.log('文本宽度：', textWidth);

const { getStringWidth } = require('text-encoding-width');

const textWidth = getStringWidth('Hello');
console.log('文本宽度：', textWidth);