CSS中字距，詞距，首行縮進，字體大小，排版相關問題的探討
阿新 • • 發佈：2018-10-25
添加 tle 根據 indent 粉紅 ora doc 默認 css
先說明下，這是在谷歌瀏覽器下字體顯示等問題做個研究，火狐下有點差異，不過火狐占有率低，而且顯示的沒有谷歌那麽合理，不管它先。IE卡的要死，半死不活，也懶得深入研究這些細節，字體排版上不是強迫癥，差別也不大。
div{ border: 1px solid black; color: red; font-size: 14px; }
<div>文字，咋,排-hello Spacing</div>
就是這麽簡單的頁面。顯示結果如下
漢字占的地方是綠色部分是寬14px，高14px
英文字符占的地方黃色部分是寬 7px，高14px
1.font-size:14px,默認行高會上下加1px,達到16px
2.漢字字高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文件代碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 div{ 8 /*width: 100px;*/ 9 border: 1px solid black; 10 color: red; 11 font-size: 14px; 12 13 text-decoration: none; 14 letter-spacing: 10px; 15 word-spacing:20px; 16 text-indent: 2em; 17 } 18 </style> 19 </head> 20 <body> 21 <div>文字，咋,排-hello Spacing</div> 22 </body> 23 </html>
CSS中字距，詞距，首行縮進，字體大小，排版相關問題的探討