Firefox中使用getComputedStyle获取元素font返回空字符串的问题

我太懂这个痛点了——Firefox对CSS简写属性的处理逻辑和Chrome、Edge这些浏览器不一样，直接用getPropertyValue('font')确实会返回空字符串，导致canvas上下文没法匹配目标元素的字体，measureText的结果自然就不准了。

问题根源 #

Firefox的getComputedStyle不会自动把分散的字体相关属性（比如font-size、font-family、font-weight等）合并成font这个简写属性返回，而其他浏览器会自动做这个合并操作。所以我们得手动把这些属性拼起来才行。

解决方案：手动拼接完整的字体字符串 #

我们可以写一个辅助函数，从元素的计算样式里逐个提取必要的字体属性，然后严格按照CSS font简写的规则组合成完整的字符串。

下面是修改后的完整代码：

export function getTextWidth(items: string | string[], font: string | HTMLElement, fallbackFont?: string): number {
  const canvas = ((getTextWidth as any).canvas as HTMLCanvasElement || ((getTextWidth as any).canvas = document.createElement('canvas') as HTMLCanvasElement));
  const context = canvas.getContext('2d');
  let maxWidth = 0;

  function getElementFont(element: HTMLElement): string {
    const style = window.getComputedStyle(element);
    // 严格按照CSS font简写的属性顺序提取
    const fontProps = [
      style.getPropertyValue('font-style'),
      style.getPropertyValue('font-variant'),
      style.getPropertyValue('font-weight'),
      style.getPropertyValue('font-stretch'),
      `${style.getPropertyValue('font-size')}/${style.getPropertyValue('line-height')}`,
      style.getPropertyValue('font-family')
    ];
    // 过滤空值，避免无效的属性组合
    return fontProps.filter(prop => prop.trim() !== '').join(' ');
  }

  if (typeof font === 'string') {
    context.font = font || 'normal 12px sans-serif';
  } else if (typeof font === 'object') {
    const elementFont = getElementFont(font);
    if (elementFont) {
      context.font = elementFont;
    } else if (fallbackFont) {
      context.font = fallbackFont;
    } else {
      context.font = 'normal 12px sans-serif';
    }
  }

  if (!Array.isArray(items)) items = [items];
  for (const item of items) {
    const width = context.measureText(item).width;
    maxWidth = Math.max(maxWidth, width);
  }

  return maxWidth;
}

关键说明 #

• getElementFont函数严格遵循CSS font简写的属性顺序（font-style → font-variant → font-weight → font-stretch → font-size/line-height → font-family）提取拼接，确保生成的字符串符合浏览器解析要求。
• 用filter去掉空属性值（比如有些元素没设置font-stretch，这个值就为空），避免出现多余空格或无效组合。
• 这样处理后，Firefox就能正确获取到元素的完整字体样式，canvas的measureText结果也会和目标元素的文本宽度完全匹配。

这个方法让fallbackFont只作为极端情况的兜底，不再是依赖的主要方案，比原来的实现可靠多了。

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