javascript - 等幅文字のピクセル幅

Question

等幅フォントの文字のピクセル幅を計算することは可能ですか? DIV ですべての文字が同じ幅を占める必要があるため、等幅フォントを使用していますが、実際のピクセル幅を確実に取得する方法がわかりません。JavaScript で計算を行うには、幅を修正する必要があります。これが私のcssです：

font-family: monospace;
font-size: 15px; 

これは可能ですか？

Answer 1

これを行うために私が考えることができる最善の方法はposition: absolute; top: -100px;、単一の文字を含む画面外のスパン（）を作成することです。次に、スパンの幅を測定して、等幅フォントで1文字の幅を取得できます。ただし、これは幅に含まれているため、がスパンにpadding設定されていることを確認してください。0px

概算のみが必要な場合は、ex単位が役立つことがよくあります。1ex小文字の「x」の高さです。多くの場合、これは幅とほぼ同じです。しかし、それは正確ではありません。

Answer 2

すべてのプラットフォームでモノスペースかどうかに関係なく、文字の幅や高さを完全に確認できるかどうかはわかりません。font-size の PX サフィックスは、画面上の実際のピクセルを表していません (詳細については、こちらをご覧ください)。

唯一の方法は、各文字に固定幅のスパンを使用することだと思います。