CSS 網頁中的文字重疊

網頁中的文字重疊是什麼原因 

[點擊放大]

在流覽網頁時，經常可以看到文字重疊的現象，尤其是比較大的文字（如上圖一），它們好像更容易“重疊”。  其實，出現這種現象，90%的原因是出自行高line-height的誤定。  line-height屬性設置行間的距離（即行高），它和字體大小font-size有很深的關係。line-height與font-size的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。  line-height的屬性值可以是數位、圖元、百分比等等。  當重疊現象出現時，一般都是行高的尺寸單位不對應所致。比如： 

<h1 style=" line-height:16px;font-size:30px;">文字文字文字<br />文字文字文字</h1>

 如圖一中所示，文字是30px，而行高是16px，文字必然會重疊。  所以，在某些區域的文字大小可能不會被預知的情況下，最好使用一些靈活的尺寸單位，比如百分比和em等，而盡少使用固定的尺寸單位。  將上代碼改為： 

<h1 style=" line-height:1em;font-size:30px;">文字文字文字<br />文字文字文字</h1>

 或者： 

<h1 style=" line-height:120%;font-size:30px;">文字文字文字<br />文字文字文字</h1>

 1em 等於當前的字體尺寸，不論你的字體是多大，行高都會與字體等高，不會出現重疊現象。定義成百分比，行高會隨著字體的大小按百分比放大或縮小。  這兩種方法完全可以有效防止文字重疊，而且簡單易行。