Question

我想创建一个'32个字符宽的容器'并将默认字体大小设置为1em，然后创建另外两个允许更改字体的样式，这样每行只能有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'宽得多（这是我的'默认'线宽）。

Answer 1

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

...但它是新的，浏览器支持可能还不够。

Answer 2

更明确地解决实际问题（请参阅@ Quentin对原则的出色解释的答案）：

如果您希望在使用等宽字体时将某些内容设置为 N 字符，请将其宽度设置为 N ch个单位，然后将其设置为对于不支持em的浏览器，ch单元中的先前设置。 ch和em之间的关系取决于字体。对于Courier New（Windows附带），似乎ch约为0.625em。我通过一些测试发现了这个。我对这个理论不太确定;在Courier New中，提前宽度（ADW）是1229个单位，em中有2048个单位，这似乎意味着值稍微小一点，但可能在字符之间存在一些解释差异的阴沟。

所以要设置一个32个字符宽的元素，你可以设置它

width: 20em;
width: 32ch;

当然，如果实际字体不是Courier New，则宽度可能与不支持ch单元的浏览器上的所需宽度不同。根据{{3}}，Chrome不支持ch，但至少在Chrome 28beta中支持。

EM的宽度不如我所期望的那样

2 个答案: