有没有办法使用 CSS 创建基于字符大小的布局？答案

【问题标题】：Is there a way to create a character-size based layout with CSS?有没有办法使用 CSS 创建基于字符大小的布局？
【发布时间】：2012-06-28 21:50:58
【问题描述】：

我必须将以前在系统控制台中以文本模式运行的旧应用程序移植到 HTML5。

HTML5 中的布局必须模仿旧的行为，即字体必须是等宽的，表单、字段和文本的尺寸必须是字符宽度或高度的倍数。

到目前为止，通过使用absolute 定位以及为font、font-size、line-height 精心选择的值，我可以获得几乎令人满意的结果。

对于元素的高度，我在em 中指定了我的值，所以一切都到位了。但是，我找不到轻松处理元素宽度的方法。

假设我有一个标签、一个文本输入和一个 div，它们的宽度必须完全相同。标签长度为 7 个字符，因此输入也应为 7 个字符。

类似：

mylabel
[input]
[mydiv]

但是，当使用em 作为字符宽度时，我得到以下布局：

mylabel
[input way too large]
[mydiv way too large]

显然，因为em 表示基本字符高度，而不是宽度。所以我不能依赖它。

你有解决这个问题的办法吗？如果可能，我想避免使用 Javascript，但我想我别无选择。

我必须针对所有流行的浏览器（Internet Explorer、Chrome、Firefox、Opera）。

【问题讨论】：

您是否设置了输入元素的字体以匹配纯文本字体？有时是必要的。
@biziclop：我有。但遗憾的是，我必须找到一个适用于所有元素的解决方案，而不仅仅是inputs。也就是说，它可能是 div 而不是 input 并且应该呈现相同的内容。我更新了我的问题以消除歧义。感谢您注意到这一点。
您可以尝试ex 单位，它仍然是垂直的，但更接近字符宽度。或者，如果没有任何帮助，您可以使用 size="chars" 属性：<input type="text" value="0123456789" size="10"> 示例：jsfiddle.net/8Fbwx 不幸的是，这也失败了。
也许折磨letter-spacing也有帮助。

【解决方案1】：

_{我不知道这是否被任何浏览器支持，但有一天这可能是一个可以接受的解决方案。}

等于在用于呈现它的字体中找到的"0"（零，U+0030）字形的提前量度。

“提前量度”本质上是字符的宽度。在等宽字体中，所有字符的宽度都是相同的。

另一种方法是确定每个使用的字体大小的字符宽度，并在定义宽度时使用该值的倍数。如果幸运的话，它只是em 单位的一小部分。

【讨论】：

我的目标浏览器不支持ch 单位（我希望如此），所以我必须手动测量 avascript 中的字符宽度，并从那里计算元素尺寸。接受这个答案，因为我相信它在未来会变得越来越真实。

【解决方案2】：

ex 是一个类似于em 的单位，但高度为小写x，而不是大写M。在等宽字体中，您经常会发现x 实际上是正方形，使得ex 大约等于一个字符的宽度。

【讨论】：