モノスペースフォントで文字のピクセル幅を計算することは可能でしょうか? 私はモノスペースフォントを使用しています。私はDIVで同じ幅を占めるすべての文字が必要ですが、実際のピクセル幅を確実に取得する方法は不明です。私は、JavaScriptで計算を行うために幅を修正する必要があります。モノスペース文字のピクセル幅
font-family: monospace;
font-size: 15px;
はこれが可能である: ここに私のCSSですか?
モノスペースフォントで文字のピクセル幅を計算することは可能でしょうか? 私はモノスペースフォントを使用しています。私はDIVで同じ幅を占めるすべての文字が必要ですが、実際のピクセル幅を確実に取得する方法は不明です。私は、JavaScriptで計算を行うために幅を修正する必要があります。モノスペース文字のピクセル幅
font-family: monospace;
font-size: 15px;
はこれが可能である: ここに私のCSSですか?
私はこれを行うには、単一の文字を含むスクリーン(position: absolute; top: -100px;
)のスパンを作成することが考えられます。その後、幅の幅を測定して、モノスペースフォントの幅を1文字にすることができます。ただし、padding
がスパンで0px
に設定されていることを確認してください(幅に含まれるため)。
編集: 近似が必要な場合は、ex
ユニットが役立つことがよくあります。 1ex
は、小文字の「x」の高さです。これはしばしば幅とほぼ同じです。しかしそれは正確ではありません。
技術的には、offsetWidthプロパティはおそらく要素の幅を取得するための最良のショットです。 '1ex'ユニットは、文字の前進幅に対して定義された関係を持ちません。たとえば、16pxサイズのCourier Newの場合、文字の前進幅は10pxですが、1exは7pxです。 –
特定のフォントとサイズを指定しただけで、私のブラウザがそれを使用しているとは限りません。 –
Googleの@includeフォントのモノスペースフォントを使ってみましたか?私はこれがすべての(サポートしている)ブラウザで同じ文字サイズになると思うだろう。あなたはまだそれを自分で測定する必要があります。 – Leaf