先说明一下，这是GoogleChrome下的字体显示等问题的研究，在Firefox下有点不一样，但是Firefox有一个占有率低，而且展示不如google合理，排版不是强迫症，差别不大。div{边框：1px纯黑色；红色;字体大小：14px；}
text,huh,row-helloSpacing
就是这样一个简单的页面。显示结果如下。汉字占据的绿色部分宽14px，高14px。英文字符占据的黄色部分宽7px，高14px。14px，字宽14px（宋体设计为13+1模式），字相邻3.英文字符（一个空格视为英文字符，hello后面的一个），字宽7px，更改css，字符间距div{border:1pxsolidblack;红色;字体大小：14px；/*添加字符间距*/letter-spacing:10px;}4.letter-spacing表示单词之间的间距，也就是出现在图片中的蓝色方块，设置为10px5的宽度。可以理解为默认的letter-spacing:0px6。空格应该算是一个英文字符，它也有自己的letter-spacing7。中文标点符号相当于汉字，英文标点符号相当于英文字符然后改css，加上字间距div{border:1pxsolidblack;红色;字体大小：14px；/*添加字间距*/letter-spacing:10px;/*添加字间距*/word-spacing:20px;}8.word-spacing，词间距，浏览器根据空格判断，如果有空格就认为是一个词。9、hello后面的空格，后面是letter-spacing（蓝色），加上wordspacing（粉色方块20）就是真正的距离。最后一次更改CSS，添加第一行缩进div{border:1pxsolidblack;红色;字体大小：14px；/*添加字间距*/letter-spacing:10px;/*添加字间距*/word-spacing:20px;/*添加首行缩进*/text-indent:2em;}10。这里1em是14px，2em是28px，text-indent首行缩进，所以文字前面就是28px11。这里可以看到，字后加了kerning，字间距加在kerning后，字距和字间距默认都是0！最后附上html文件代码