共计 1308 个字符，预计需要花费 4 分钟才能阅读完成。
先说明下，这是在谷歌浏览器下字体显示等问题做个研究，火狐下有点差异，不过火狐占有率低，而且显示的没有谷歌那么合理，字体排版上不是强迫症，差别也不大。
div{
border: 1px solid black;
color: red;
font-size: 14px;
}
<div> 文字，咋, 排 -hello Spacing</div>
就是这么简单的页面。显示结果如下
汉字占的地方是绿色部分是宽 14px，高 14px
英文字符占的地方黄色部分是宽 7px，高 14px
1.font-size:14px, 默认行高会上下加 1px, 达到 16px2. 汉字字高 14px, 字宽 14px（宋体设计的是 13+ 1 模式）, 字字紧相邻 3. 英文字符（空格看成一个英文字符，hello 后面那个）, 宽 7px
开始变动 css，加字距
div{
border: 1px solid black;
color: red;
font-size: 14px;
/* 添加字距 */
letter-spacing: 10px;
}
4.letter-spacing 的意思是字与字之间的间距，也就是出现在上图中的蓝色方块，这里设置宽 10px
5. 可以理解为默认 letter-spacing:0px
6. 应该把空格当成一个英文字符看，他也有自己的 letter-spacing
7. 中文标点符号等同于汉字，英文状态下标点符号等同于英文字符
再变动 css，加词距
div{
border: 1px solid black;
color: red;
font-size: 14px;
/* 添加字距 */
letter-spacing: 10px;
/* 添加词距 */
word-spacing: 20px;
}
8.word-spacing，单词间距，浏览器是根据空格判断的，有空格就认为有词。
9.hello 后的空格，后加上字距 letter-spacing(蓝色)，再加上 单词间距（粉红色块 20）才是真正的距离。
最后变一次 CSS，加上首行缩进
div{
border: 1px solid black;
color: red;
font-size: 14px;
/* 添加字距 */
letter-spacing: 10px;
/* 添加词距 */
word-spacing: 20px;
/* 添加首行缩进 */
text-indent: 2em;
}
10. 这里 1em 为 14px,2em 为 28px,text-indent 首行缩进，所以，文的前面为 28px
11. 这里可以看出，字距加在字后面，单词间的词距加在字距后，字距词距默认皆为 0！
最后附上 html 文件代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<style>
div{
/*width: 100px;*/
border: 1px solid black;
color: red;
font-size: 14px;
text-decoration: none;
letter-spacing: 10px;
word-spacing:20px;
text-indent: 2em;
}
</style>
</head>
<body>
<div> 文字，咋, 排 -hello Spacing</div>
</body>
</html>
本次分享到这里了。
