2013-03-22 7 views
13

モノスペースフォントで文字のピクセル幅を計算することは可能でしょうか? 私はモノスペースフォントを使用しています。私はDIVで同じ幅を占めるすべての文字が必要ですが、実際のピクセル幅を確実に取得する方法は不明です。私は、JavaScriptで計算を行うために幅を修正する必要があります。モノスペース文字のピクセル幅

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

はこれが可能である: ここに私のCSSですか?

+0

特定のフォントとサイズを指定しただけで、私のブラウザがそれを使用しているとは限りません。 –

+0

Googleの@includeフォントのモノスペースフォントを使ってみましたか?私はこれがすべての(サポートしている)ブラウザで同じ文字サイズになると思うだろう。あなたはまだそれを自分で測定する必要があります。 – Leaf

答えて

11

私はこれを行うには、単一の文字を含むスクリーン(position: absolute; top: -100px;)のスパンを作成することが考えられます。その後、幅の幅を測定して、モノスペースフォントの幅を1文字にすることができます。ただし、paddingがスパンで0pxに設定されていることを確認してください(幅に含まれるため)。

編集: 近似が必要な場合は、exユニットが役立つことがよくあります。 1exは、小文字の「x」の高さです。これはしばしば幅とほぼ同じです。しかしそれは正確ではありません。

+4

技術的には、offsetWidthプロパティはおそらく要素の幅を取得するための最良のショットです。 '1ex'ユニットは、文字の前進幅に対して定義された関係を持ちません。たとえば、16pxサイズのCourier Newの場合、文字の前進幅は10pxですが、1exは7pxです。 –

1

すべてのプラットフォームで、モノスペースまたはそれ以外の文字の幅や高さを絶対に確かめることはできません。 font-sizeのPXサフィックスは画面上の実際のピクセルを表していません(詳細はhereを見てください)。

文字ごとに固定幅のスパンを使用する方法はないと思います。

この度は、固定幅の文字が必要な理由を知りたいと思っています。あなたはJSフィドルを共有できますか?

+0

私は基本的には幅を近似して作業していますが、それを正確に行う方法があるかどうか疑問に思っていました – TGH

関連する問題