close

部落格文章美觀與字型、排版有關,

想要能舒適的觀看部落格文章,

字型的選擇與排版是很重要的。

前篇有講過如何針對個別文章去改變字行間的間距,

若已經有固定的喜好排版方式,

想要每篇預設的字行間的間距都是相同的,

那就要使用CCS去做設定

[步驟]

1.進入部落格後台

2.點選"選項"

3.點選樣式管理

4.點選"部落格CCS原始碼"頁面項目

5.使用Ctrl+f 找尋關鍵字.article-content

6.可找到幾個.article-content的地方,其中大括號內的內容裡有line-height:關鍵字處做數字上的更改

 

有幾種方式可以去做調整

其一、使用標準間距,設多少就距離多少

其二、使用字型的比例,其間距與字型大小有關,呈等比例

 

我們先使用標準間距當例子:

目前設定的字型大小為13px

而line-height設為13px

2017-06-16_154228.png

 

line-height:13px 結果如下

2017-06-16_153940.png

 

若改成兩倍大呢? 那我們改成 line-height:26px

結果如下:

2017-06-16_154031.png

 

 

 

我們改用第二種方式,使用比例方式去調整行距

2017-06-16_151442.png

 

設定170%的結果如下

2017-06-16_152045.png

設定100%的桔果如下:

2017-06-16_151854.png

 

設定20%的結果如下:

2017-06-16_151954.png

 

 

兩種方式都能達到相同的目的,殊途同歸。

但我比較喜歡使用比例去調整,

有個優點,一旦字型大小作更改,

通常不必再同時更改字型行間的間距大小也能保持原本的觀看感覺

 

 

 

 

 

 

 

arrow
arrow

    克勞德 發表在 痞客邦 留言(0) 人氣()