テキスト幅はどのように測定されますか？

テキスト幅とは、特定のフォント、サイズ、ウェイトでレンダリングされた文字列が占める水平ピクセル空間を指します。文字数とは異なり、ピクセル幅は各グリフの比例間隔に依存します。ほとんどのフォントでは、文字「W」は「i」よりもはるかに広いです。テキスト幅を正確に測定することは、UIレイアウト、ラベルの切り詰め、動的キャンバスレンダリング、および文字列を固定幅コンテナに収めるために重要です。

ブラウザはHTML5 Canvas APIのmeasureText()メソッドを公開しており、これはレンダリングされたテキスト幅を画面に表示せずに計算します。オフスクリーンキャンバスコンテキストに描画することで、フォントファミリー、サイズ、ウェイトの任意の組み合わせに対して正確なサブピクセル測定を取得できます。

ツールの説明

このツールはCanvas APIを使用して1つまたは2つのテキスト文字列のピクセル幅を計算します。フォントファミリーを選択し、フォントサイズとウェイトを設定すると、レンダリングされたピクセル幅が即座に表示されます。2つの文字列が入力された場合、比較ビューは絶対差と幅の比率統計を表示します。

機能

  • すべてのWebセーフシステムフォントとカスタムアップロードフォントファイル（TTF、OTF、WOFF、WOFF2）をサポート
  • 差分と比率統計を含む2つの文字列の同時比較
  • 1～256 pxのフォントサイズと9つの標準フォントウェイト値すべてに対応

動作原理

幅はブラウザのCanvasRenderingContext2D.measureText() APIを使用して測定されます。オフスクリーン<canvas>要素が作成され、その2Dコンテキストのフォントプロパティが選択されたファミリー、サイズ、ウェイトに一致するように設定され、measureText()はピクセル単位のバウンディングボックス幅を返します。カスタムフォントは測定前にブラウザのFontFaceレジストリに読み込まれるため、結果は実際のタイプフェイスを反映します。