0

我想创建一个“32 个字符宽”的容器并将默认字体大小设置为 1em，然后创建 2 个允许更改字体的其他样式，以便每行只有 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”（零，U+0030）字形的提前量度。

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

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

于 2013-06-07T10:28:52.773 回答
1

为了更明确地解决实际问题（请参阅@Quentin's answer以获得对原则的出色解释）：

如果您希望在使用等宽字体时具有N个字符宽，请将其宽度设置为N ch个单位，并使用前面的em单位设置来支持它，对于不支持ch. ch和之间的关系em取决于字体。对于 Courier New（随 Windows 一起提供），它似乎ch大约是0.625em. 我通过一些测试发现了这一点。我不太确定这个理论；在 Courier New 中，前进宽度 (ADW) 为 1229 个单位，其中 2048 个单位em，这似乎意味着较小的值，但推测字符之间存在一些间隙来解释差异。

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

width: 20em;
width: 32ch;

当然，如果实际字体不是 Courier New，则在不支持该ch单位的浏览器上，宽度可能与所需的宽度不同。根据MDN 关于 units的信息，Chrome 不支持ch，但至少在 Chrome 28bet​​a 中存在支持。

于 2013-06-07T11:28:43.647 回答