CSS

一、什么是等宽字体?

所谓等宽字体,一般是针对英文字体而言的。东亚字体,应该都是等宽的,就是每个字符在同等font-size下占据的宽度是一样的。但是英文字体就不一定了,随便写一个单词,就会很明显地发现这个字符‘i’要比其他字符,例如‘M’占据的宽度要小。如下:

  1. iiiiii
  2. MMMMMM

CSS3 新单位 ch 和等宽字体 - 图1
上面6个i,下面6个M。怎么样,是不是i瘦了好几圈啊!
但是,如果是等宽字体。例如:Consolas, Monaco, monospace,则身材就一样了:

  1. iiiiii
  2. MMMMMM

CSS3 新单位 ch 和等宽字体 - 图2
像Consolas, Monaco, monospace这样可以让英文字符同等宽度显示的字体呢就称为等宽字体。
那等宽字体在web中有什么用呢?

二、等宽字体与代码呈现

写代码的,无论是什么语言,易读是第一位,使用等宽字体,阅读会更轻松舒服。因此,一般编辑器使用的字体或者web上需要呈现源代码的字体都是等宽字体。
例如,demo示意页面的源代就是等宽的:

  1. <p><strong>边框类型:</ strong></p>
  2. <select class="monospaced">
  3. <option value="solid" selected>---—---</option>
  4. <option value="dashed" >-------</ option>
  5. <option value="dotted" >.......</option>
  6. </select>
  7. <p id="border" class="border"></p>

三、CSS3 ch单位与等宽字体布局

CSS3 vw,vh单位想必耳熟能详,PC端滚动条晃动问题利器,PC/Mobile端布局,以及和calc结合实现真正流式文字排版,但是ch就可怜的多,几乎无人问津,实际上,人家也有很精妙的技能的。
ch和em,rem,ex一样,是CSS中为数不多和字符相关的相对单位。和ch相关的字符是0,没错,就是0123456的那个阿拉伯数字0. 1ch表示一个0字符的宽度,所以000000所占据的宽度就是6ch。
但是,实际上,网页内容的字符不可能都是0,所以,这个单位乍看就显得很鸡肋。实际上,此单位,基本上,必须与等宽字体一起使用才有用。
所以,ch单位的潜台词就是,“没有等宽字体我就是废柴”!
为什么呢?比方说有个单词,叫做“iPhone10″,如果是等宽字体,由于所有字符占据宽度和0一样,则,此单词占据宽度就是精确的8ch,就能精确控制字符的布局。
像ch这样的单位,表面上看上去废柴,但是遇到一些特殊场景,就会显得屌的不得了。

布局实例

由于有了ch单位,配合等宽字体,就可以指定每个字符占据的精确宽度,于是,就可以使用text-indent轻轻松松实现打点效果。
HTML如下:

  1. 订单提交中<dot>...</dot>

CSS如下:

  1. @supports (display:none) {
  2. dot {
  3. display: inline-block;
  4. width: 3ch;
  5. text-indent: -1ch;
  6. vertical-align: bottom;
  7. overflow: hidden;
  8. animation: dot 3s infinite step-start both;
  9. /* 等宽字体很重要 */
  10. font-family: Consolas, Monaco, monospace;
  11. }
  12. }
  13. @keyframes dot {
  14. 33% { text-indent: 0; }
  15. 66% { text-indent: -2ch; }
  16. }

然后就有类似这样的效果:
CSS3 新单位 ch 和等宽字体 - 图3