CSS字體樣式
CSS樣式:CSS line-height 設定字體範圍高度(行間距)
用 CSS 語法可以設定輕鬆設定文字的行間距,也就是每行之間的距離,讓閱讀起來更加舒適,如果沒有設定 line-height,則每行間的距離以瀏覽器預設的效果呈現,這時候會有一個問題,就是文字大小可能會影響到文章的呈現品質,所以最好還是給 line-height 値比較好。
CSS line-height 基本語法
line-height: 設定値;
設定値的部分可以有 normal(預設值)、數字、高度値(含單位)、百分比以及 inherit(繼承自父層的行高値)等,其中 inherit 建議不要使用,因為舊型 IE 瀏覽器可能不支援,我通常都是使用高度値,看個簡單的範例。CSS line-height 範例
<span style='line-height: 20px;font-size:13px;'>
line-height: normal 文字行高設定第一行<br>
line-height: normal 文字行高設定第二行
</span>
呈現效果如line-height: normal 文字行高設定第一行<br>
line-height: normal 文字行高設定第二行
</span>
line-height: normal 文字行高設定第一行
line-height: normal 文字行高設定第二行
line-height: normal 文字行高設定第二行
line-height: normal 文字行高設定第一行
line-height: normal 文字行高設定第二行 範例中我們給 line-height 的値是 20px,這也代表著每行高度為 20px,你也可以嘗試用其它的値帶入範例看結果。要讓文章呈現好的閱讀效果,line-height 通常與 font-size(文字大小)搭配使用,如果沒有設定好文字大小,可能會出現文字重疊的現象。
英文 CSS樣式:CSS line-height 設定字體範圍高度(行間距):CSS line-height sets the height of the font range (line spacing)
Post a Comment
0 Comments