2011年11月29日 星期二

CSS 網頁中的文字重疊


网页中的文字重叠是什么原因[点击放大]
網頁中的文字重疊是什麼原因 
在流覽網頁時,經常可以看到文字重疊的現象,尤其是比較大的文字(如上圖一),它們好像更容易“重疊”。  其實,出現這種現象,90%的原因是出自行line-height的誤定。  line-height屬性設置行間的距離(即行高),它和字體大小font-size有很深的關係。line-heightfont-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 等於當前的字體尺寸,不論你的字體是多大,行高都會與字體等高,不會出現重疊現象。定義成百分比,行高會隨著字體的大小按百分比放大或縮小。  這兩種方法完全可以有效防止文字重疊,而且簡單易行。

1 則留言:

annion 提到...

看了你文章,解決文字重疊問題,謝謝。