如何在沒有等寬字體的情況下準確計算 JavaScript 中的文字寬度？

在沒有等寬字體的情況下在JavaScript 中計算文字寬度

問題：

如何在沒有等寬字體的情況下在JavaScript 中準確計算文字寬度依賴等寬空間字體？

答案：

在 HTML 5 中，Canvas.measureText 方法提供了一個解。這是一個範例：

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

此函數根據指定字體測量文字寬度（以像素為單位）。例如：

console.log(getTextWidth('hello there!', 'bold 12pt arial')); // Outputs approximately 86

您也可以使用getCanvasFont 實用函數從現有元素確定字體設定：

function getCanvasFont(el) {
  const fontWeight = getCssStyle(el, 'font-weight') || 'normal';
  const fontSize = getCssStyle(el, 'font-size') || '16px';
  const fontFamily = getCssStyle(el, 'font-family') || 'Times New Roman';
  return `${fontWeight} ${fontSize} ${fontFamily}`;
}

const fontSize = getTextWidth(text, getCanvasFont(myEl));

優點和注意事項

此方法的優點是基於DOM的方法：

• 簡潔且安全
• 自訂選項（例如，textAlign、textBaseline）

但是，請注意：

• 需要考慮填充、邊距和邊框當向DOM在添加文字時
• 不同的瀏覽器可能會提供子像素或整數準確性
• Firefox 透過 Canvas 方法表現出更快的效能

以上是如何在沒有等寬字體的情況下準確計算 JavaScript 中的文字寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！