Html EM中的宽度不作为I'；我希望

我想创建一个“32个字符宽”的容器，并将默认字体大小设置为1em，然后创建两个允许更改字体的其他样式，以便在使用相应样式（C24或C42）时，每行只能使用24或42个字符。字体大小设置正常，但是容器看起来比我预期的要宽。在chrome中，在document inspector中，如果我将容器更改为“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>

012345678901234567890123
01234567890123456789012345678901
012345678901234567890123456789012345678901

我还做了一把小提琴来分散注意力

正如您在我的html中所看到的，当我将样式设置为“C24”时，我希望行足够宽，仅能容纳24个字符，或者更像，我正在增加字体大小，以便仅容纳24个字符

---

我的问题是，如果你看一下我做的小提琴，你会发现“C”字体样式基本上使每行文本的长度正确，但外部容器比“32em”（这是我的“默认”线宽）宽得多。

em

是字体的高度，而不是宽度。由于大多数单空间字体是矩形的，而不是方形的，因此它们并不等效

em单元
等于使用它的元素的“font size”属性的计算值

-

您可以尝试

ch

装置：

ch单元
等于在用于渲染的字体中找到的“0”（零，U+0030）字形的高级度量值

-

---

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

em

是字体高度，而不是宽度。由于大多数单空间字体是矩形的，而不是方形的，因此它们并不等效

em单元
等于使用它的元素的“font size”属性的计算值

-

您可以尝试

ch

装置：

ch单元
等于在用于渲染的字体中找到的“0”（零，U+0030）字形的高级度量值

-

---

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

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

如果在使用单空格字体时希望某个字体的宽度为N个字符，请将其宽度设置为N

ch

units，并使用前面在

em

units中的设置对其进行备份，适用于不支持

ch

的浏览器。

ch

和

em

之间的关系取决于字体。对于Courier New（与Windows一起提供）而言，

ch

大约为

0.625em

。我通过一些测试发现了这个。我对这个理论不太确定；在Courier New中，进阶宽度（ADW）为1229个单位，而

em

中为2048个单位，这似乎意味着较小的值，但字符之间可能存在一些空格来解释差异

因此，要将元素设置为32个字符宽，您需要为其设置

width: 20em;
width: 32ch;

---

当然，如果实际字体不是新字体，则宽度可能与不支持

ch

单元的浏览器上所需的宽度不同。据介绍，Chrome不支持Chrome 28beta，但至少在Chrome 28beta中存在支持。

为了更明确地解决实际问题（请参见@Quentin的答案，以获得对原理的极好解释）：

如果在使用单空格字体时希望某个字体的宽度为N个字符，请将其宽度设置为N

ch

units，并使用前面在

em

units中的设置对其进行备份，适用于不支持

ch

的浏览器。

ch

和

em

之间的关系取决于字体。对于Courier New（与Windows一起提供）而言，

ch

大约为

0.625em

。我通过一些测试发现了这个。我对这个理论不太确定；在Courier New中，进阶宽度（ADW）为1229个单位，而

em

中为2048个单位，这似乎意味着较小的值，但字符之间可能存在一些空格来解释差异

因此，要将元素设置为32个字符宽，您需要为其设置

width: 20em;
width: 32ch;

---

当然，如果实际字体不是新字体，则宽度可能与不支持

ch

单元的浏览器上所需的宽度不同。根据，Chrome不支持Chrome 28beta，但至少支持Chrome 28beta。

这是字体高度而不是字体宽度！！！？？？！！如果这是真的，我会感到惊讶，因为所有的教程都说这是一种设置宽度的好方法，哈哈，但是，正如我所说的，没有像我预期的那样工作。我引用并链接了规范。它与字体高度有关。

em

是“M”的宽度，这是一个常见且奇怪的误解。奇怪的是，很容易看出它不是，例如，通过构造一个

1em

宽的元素并在那里放置一个“M”。em在规范中没有提到高度，也许他们应该让它更清楚，如果我没有先读你的答案，我甚至不会想到‘这是说它是高度’，即使考虑到你的答案，我也不太明白他们怎么说它是高度，他们只说“等于使用它的元素的‘font size’属性的计算值”。所以所有那些教程都说用EM表示宽度。。。由于我所期望的原因，它不起作用。这是字体高度而不是字体宽度！！！？？？！！如果这是真的，我会感到惊讶，因为所有的教程都说这是一种设置宽度的好方法，哈哈，但是，正如我所说，并没有像我预期的那样工作