2014-05-24

修改 Blogger 的字型、行距、字距

要改 Blogger 的字型,首先先來認識中文字型的英文名稱

◎Linux作業系統
       文泉驛正黑    :WenQuanYi Zen Hei
       全字庫正楷體:TW-Kai
◎Mac OS作業系統
       黑體-繁  :Heiti TC
       儷黑 Pro :LiHei Pro
       標楷體   :BiauKai
◎Windows作業系統
       微軟正黑體 :Microsoft JhengHei
       新細明體  :PMingLiU
       細明體   : MingLiU
       標楷體   :DFKai-sb

了解之後,開始來改字型,到【範本】→【編輯HTML】中,按【Ctrl】鍵+【F】鍵,輸入關鍵字 px ,按【Enter】鍵,如下圖

2014-05-24_125840

就搜尋出的第一個結果的重點來解釋一下
<Variable name="body.font" description="Font" type="font"
default="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif"value="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
body.font是內文字型,default是預設值,value是指定值,會優先執行value,若找不到,再執行default,所以我們若要改內文的字型為,在Linux作業系統顯示全字庫正楷體 (TW-Kai),在Mac OS作業系統顯示標楷體 (BiauKai),在Windows作業系統顯示微軟正黑體 (Microsoft JhengHei),就要改value值。
將原本的
value="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif"
改為
value="normal normal 16px Arial, TW-Kai, BiauKai, Microsoft JhengHei, sans-serif"
若只要優先顯示微軟正黑體,則只要在, sans-serif前插入, Microsoft JhengHei即可,如下
value="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, Microsoft JhengHei, sans-serif"
要注意在字型前要空一格,這樣就可以了。下面還有各區塊,可依此類推改字型。
header.font
description.font
tabs.font
date.font
post.title.font
widget.title.font
widget.font
要改行距、字距。到【範本】→【自訂】→【進階】→【新增CSS】中新增以下字串
.post-body {
font-size:100%;
color:#222222;
line-height: 1.8em;
letter-spacing: 0.8px;
}
font-size:文字大小
color:文字顏色
line-height:行距
letter-spacing:字距
以上數值皆可依您需要做更改,改好後,按【套用至網誌】就完成了,如下圖

2014-05-24_130202

若只要改行距、字距,新增以下字串即可
.post-body {
line-height: 1.8em;
letter-spacing: 0.8px;
}
line-height:行距
letter-spacing:字距
以上數值皆可依您需要做更改

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.