0

「幅 32 文字」のコンテナーを作成し、デフォルトのフォントサイズを 1em に設定してから、フォントを変更できるようにする 2 つの他のスタイルを作成して、対応するときに 1 行あたり 24 文字または 42 文字のみが可能になるようにします。スタイルが使用されます (C24 または C42)。フォント サイズの設定は正常に機能していますが、コンテナーが予想よりも広く表示されています。Chrome のドキュメント インスペクタで、コンテナを「20em」に変更すると正しいサイズになりますが、これは期待した動作ではありません。CSS に何か問題があるのでしょうか。

私のCSS

/*setting this outer container font just in case*/
div.outer 
{
    font-size: 1em;
    font-family : "Courier New", Courier, monospace;
}   

div.printContainer 
{
    font-size: 1em;
    font-family : "Courier New", Courier, monospace;
    width: 32em;
    border:1px solid #EEEEEE;       
}

div.printContainer div.C42 
{
    font-size : 0.73em;
}

div.printContainer div.C32 
{
    font-size : 1em;        
}

div.printContainer div.C24 
{
    font-size : 1.33em;     
}

私のHTML

<div style="" class="outer">
    <div class="printContainer">
        <div class="C24">012345678901234567890123</div>
        <div>01234567890123456789012345678901</div>
        <div class="C42">012345678901234567890123456789012345678901</div>
    </div>
</div>

そして、私はデモンストレーションのためにフィドルを作りました... http://jsfiddle.net/Ninjanoel/bywQp/

HTML でわかるように、スタイルを 'C24' に設定すると、行を 24 文字だけに十分な幅にするか、24 文字だけが収まるようにフォント サイズを大きくします。

私の問題は、私が作成したフィドルを見ると、「C」フォントスタイルが基本的にテキストの各行を正しい長さにしていることがわかりますが、外側のコンテナは「32em」よりもはるかに広いです(これは私の「デフォルト」です)線幅）。

4

2 に答える 2

4

em幅ではなく、フォントの高さです。ほとんどの等幅フォントは正方形ではなく長方形であるため、同等ではありません。

em unit
それが使用されている要素の「font-size」プロパティの計算値に等しい。

— http://www.w3.org/TR/css3-values/#font-relative-lengths

chユニットを試すことができます：

ch unit
レンダリングに使用されるフォントにある「0」(ZERO、U+0030) グリフの事前測定値に等しい。

— http://www.w3.org/TR/css3-values/#ch-unit

…しかし、それは新しいものであり、ブラウザのサポートは十分ではないかもしれません.

于 2013-06-07T10:28:52.773 に答える