8

我遇到了一些网站,上面写着

在前面的示例中,第 1 列具有固定宽度:已设置为 400 像素宽。使用 12 像素的文本渲染,这将导致每行大约 66 个字符。如果您的读者将文本大小增加到 16 像素,则该度量将减少到每行 50 个字符。

1 列的 CSS是DIV#col1 { width:400px }

目前,我不太关心读者增加文本大小的情况。

我不明白他从哪里得到他的比率,但这个公式似乎解释了他给出的两个比率:

approximate charcount per line = [2 * (div width)] / (font size)

公式中的单位是像素...

再往下,他又举了两个例子,这个公式似乎仍然成立……

这个公式正确吗?他为什么要给出这些比率?

我认为以前有人问过这个问题,但也许我的搜索词有误:)

4

2 回答 2

10

引用页面上的例子和公式和注释都总结了一个简单的想法,一个字符的宽度是字体大小的一半。

这只是一个粗略的经验法则,即使作为平均值也不是很准确。宽度取决于字体和字符。“字符的平均宽度”是一个非常模糊的概念。在印刷术中,例如在 Robert Bringhurst 的“印刷风格元素”中,英文小写字母(a 到 z)的长度被用作衡量标准,但它实际上意味着计算这些字母的平均值,就好像文本由以下内容组成他们只和每个字符同样频繁。

实际上,英文散文中字符的平均宽度似乎更接近字体大小的 0.4,而不是 0.5。

总之,如果您希望将列宽设置为 50 个字符,那么以下是合理的尝试:

width: 20em;
width: 50ch;

不支持 CSS3 单元的旧浏览器ch将使用20em,这对应于 0.4 的估计值。如果您已经检查(测量)您的主要字体建议是指字符相对较宽的字体,您可能会使用更大的比率或相当大的比率。但这不是精确的科学。即使使用ch单位也不是精确的科学,因为它只是表示数字零 (0) 的宽度,尽管这可以被视为“平均字符宽度”的合理近似值。

于 2012-07-14T04:03:40.537 回答
3

字体的像素大小给出了高度,宽度对应于比率。确定字符数的唯一方法是使用等宽字体。话虽这么说,这听起来是对的。确定的唯一方法是使用您正在使用的字体进行测试(因为它们的高宽比可能会有很大差异,并且肯定会因使用的字符而改变)。

于 2012-07-13T19:44:10.887 回答