css vwの意味はfont-sizeで使用する場合

Question

私の理解では、CSSの「vw」単位はビューポート幅の1％増分を参照しています。しかし

、私は、ビューポートの幅の10％となっているモノ間隔のフォント、it winds up closer to ~6% (1/16)作成：私はそれほど悪くないそれを等幅されていないフォントを使用する場合は

<div style="width: 100%; background: green; color: white; font-size: 10vw; font-family: monospace;"> 
123456789
</div> 

を、

<div style="width: 100%; background: green; color: white; font-size: 10vw; font-family: serif;" id="test8"> 
MMMMMMMMMMMMMMMMMMMM 
</div> 

これはどのフォントでも一般的な「ワイド文字」であるため、「M」を使用しています。 this caseには11文字があるので、それぞれがビューポート幅の約9％です。これはまだ10％オフです。

だから何ですか？フォントサイズで使用した場合、特に各文字の幅が同じ場合は、「vw」は実際に何を意味しますか？

Answer 1

font-sizeを指定すると、em-squareのサイズが指定されます。フォントメトリックには、em-squareに比例する各グリフのアドバンス幅が含まれます。これは、1行にいくつの文字が収まるかを決定する先行幅（および文字と単語の間隔）の合計です。

たとえば、モノスペースのCourier Newフォントを使用すると、すべてのグリフのフォント幅が1229/2048になります。

フォントサイズが10vwで文字とスペースが0の場合は、100 /（10 x 1229/2048）= 16.66文字（または切り捨てられた16文字）を、ビューポートとしてワイドです。

body { 
 
margin:0; 
 
font-size:10vw; 
 
font-family:'Courier New'; 
 
word-break:break-all; 
 
}

ABCDEFGHIJKLMNOPQRSTUVWXYZ