鲜为人知的CSS单元

作为前端开发人员，有时你会感到惭愧，因为你意识到自己对 Web 的基本构建模块了解得多么少。

我们可用的工具和技术数量非常多！所以，我们经常只选择能解决眼前问题的方法就完事，也就不足为奇了。

让我们来看一下其中一个很少使用的工具——CH CSS 单元。

CH 单位定义

根据规格

CH 单位是指字体中“0”（零，U+0030）字形的预估尺寸。（字形的预估尺寸是指其预估宽度或高度，以元素内联轴上的宽度或高度为准。）

翻译：一个 CH 等于给定字体中一个零字符所占的空间。所以如果我们写 00，那就是 2ch。

并非所有角色都平等

注意定义中特别提到了“0”（零）吗？这一点很重要，因为字体中的字符并非都相同（等宽字体，例如 Courier 字体除外）。

既然我们已经了解了ch单位是什么，接下来让我们考虑一下它适合在哪些情况下使用。

用法

我在写这篇博客文章之前已经在推特上问过这个问题了。

人们建议使用某种换行符方法并不奇怪，甚至连图片来源的Next.js 网站也使用<br>标签来创建标记。

这种方法适用于静态内容，但不能用于动态内容，至少在不使用 JavaScript 的情况下不行。

我创建了一个简单的示例来展示如何max-width通过将值设置为我们希望在一行中显示的最大字符数来实现这一点。

优点

• 适用于动态内容
• 比使用px或其他单位来表示段落宽度更好
• 字体大小改变时，外观不会改变。

缺点

• 数字符数可能很麻烦。
• 对于比例字体（非等宽字体），尺寸可能存在偏差，而这类字体占绝大多数。

另一种定义宽度的单位可能有意义的情况ch是固定宽度的文本输入（例如年份输入 - 4ch）。

结论

在大多数情况下，这个ch单位肯定不是你想要使用的，但它在最合适的地方——字符测量——却能真正发挥其优势。