&nbs p;
一、什么是等宽字体？
所谓等宽字体，一般是针对英文字体而言的。东亚字体，据我所知，应该都是等宽的，就是每个字符在同等 font-size 下占据的宽度是一样的。但是英文字体就不一定了，我随便写一个单词，什么呢，就iMac吧，大家打开自己的像素眼，就会很明显地发现这个字符’i’要比其他字符，例如’M’占据的宽度要小。什么，你看不出来。好吧，那我换种呈现方式，如下：
iiiiii
MMMMMM
上面6个i，下面6个M。怎么样，是不是i瘦了好几圈啊！
但是，如果是等宽字体。
例如：Consolas, Monaco, monospace，则身材就一样了：
iiiiii
MMMMMM
像Consolas, Monaco, monospace这样可以让英文字符同等宽度显示的字体呢就称为等宽字体。
那等宽字体在web中有什么用呢？
二、等宽字体与代码呈现
我们写代码的，无论是什么语言，易读是第一位，使用等宽字体，我们阅读会更轻松舒服。因此，一般编辑器使用的字体或者web上需要呈现源代码的字体都是等宽字体。
例如，我的demo示意页面的源代码们就是等宽的：
三、等宽字体与图形呈现实例一则
某工具有个功能，通过下拉选择，可以改变元素的边框样式，也就是borderStyle在solid/dashed/dotted间切换。
大家都知道的，原生的 <select> 的 <option> 元素的inner HTML 只能是纯text字符，不能有ht ML ，也不支持伪元素，因此，用来模拟solid/dashed/dotted，只能使用字符，但是，字符，你懂的，就像某个部位，有长有短，要想模拟成像样的规整的图形，可以吗？
可以，试试使用等 宽 字体。您可以狠狠地点击这里：等宽字体模拟边框类型demo
四、 CSS 3 ch单位与等宽字体布局
CSS3 vw , vh 单位想必耳熟能详，PC端滚动条晃动问题利器，PC/ mobile 端布局，以及和calc结合实现真正流式 文字排版 ，但是 ch 就可怜的多，几乎无人问津，实际上，人家也有很精妙的技能的。
ch 和 em , rem , ex 一样，是CSS中为数不多和字符相关的相对单位。和 ch 相关的字符是 0 ，没错，就是0123456的那个 阿拉伯数字 0 . 1ch表示一个0字符的宽度，所以000000所占据的宽度就是6ch。
但是，实际上，我们 网页内容 的字符不可能都是0，所以，这个单位乍看就显得很鸡肋。实际上，此单位，基本上，必须与等宽字体一起使用才有用。
所以，ch单位的潜台词就是，“没有等宽字体我就是废柴”！
为什么呢？你想要，比方说有个单词，叫做& # 8221;iPhone10″, 如果是等宽字体，由于所有字符占据宽度和0一样，则，此单词占据宽度就是精确的8ch, 我们就能精确控制字符的布局。
像ch这样的单位，表面上看上去废柴，但是遇到一些特殊场景，就会显得屌的不得了。
布局实例
之前有写过 文章 ，“CSS3 animation实现点点点 loading动画 ”，有 box -s hadow 模拟，还有 border+background 模拟，以及申请专利的 text-shadow 模拟，然后，自从我见到了CSS3 ch单位，我才发现，还有更好的方法。由于有了ch单位，配合等宽字体，我们就可以指定每个字符占据的精确宽度，于是，我们就可以使用 text -i ndent 轻轻松松实现打点效果。
HTML如下：
订单提交中<dot> .. .</dot>
CSS如下：
@supports (dis play :none) { dot { display: inline-block; width: 3ch; text-indent: -1ch; vert ical -align: bottom; overflow: hidden; animation: dot 3s infin IT e step-start both; /* 等宽字体很 重要 */ font-f ami ly: Consolas, Monaco, monospace; } } @keyfr am es dot { 33% { text-indent: 0; } 66% { text-indent: -2ch; } } 然后就有类似这样的效果（偷懒，非真实截图，以前做的图）：
IE13+，Ch rom e，FireFox浏览器用户可以狠狠地点击这里：CSS3 ch单位等宽字体下的字符打点loading动画demo
为何忽略IE10,IE11？
虽然说，IE9浏览器就 开始 支持 ch 单位了，但是，根据caniuse的说法，IE9-IE11的ch代码的是”0″字符本身的宽度，字符左右的那点间隙是忽略的，所以在这几个IE下，3ch的宽度要比’000’的实际宽度要短。一旦字符宽度不严格，使用 text-indent 就不能精确控制显示的字符点的个数，嗝屁！因此，省得麻烦，只对IE13+做了打点动画处理。
然而，经过我不太严格的测试，IE10,IE11浏览器似乎还行，IE9浏览器的宽度是明显有问题的。
时间 原因 ，我也没深究。
五、结束语
凌晨3点了，以为我 勤奋 写文章写到这个时间点吗？再次想多了，看动漫，一口气看了13级，科科，不然，11,12点就可以睡了。不能让家里的领导 知道 ，大家帮我保密。
CSS属性只要设计出来，并且浏览器很开心的支持，肯定是尤其原因和使用之处的。虽然，可能用处比较小众，平时不太关注。但是，关键时刻，却是棘手难题解决的利器。上面打点动画就是很好的例子，实现越来越 简单 干脆，基本上迭代了4~5个版本了。
我想，可能明年，又会发现更好的实现方式。
动漫里面，很多无人问津的人啊，道具啊什么的，其实都是非常牛的，对吧，ch也是如此。我擦，搞错了，本文讲等宽字体的。
动漫里面，很多无人问津的人啊，道具啊什么的，其实都是非常牛的，对吧，等宽字体就是如此。恩恩，这还差不多。
好了，时间不早了，周末愉快，我去睡觉了！
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-等宽字体在web布局中应用以及CSS3 ch单位嘿嘿 全部内容，希望文章能够帮你解决 html5教程-等宽字体在web布局中应用以及CSS3 ch单位嘿嘿 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-等宽字体在web布局中应用以及CSS3 ch单位嘿嘿的详细内容...