等幅フォントを使用せずに 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 中国語 Web サイトの他の関連記事を参照してください。