Blogger之blogspot 字體字距行距字形 調整設置說明

這貼先前有key過,不過是針對 google chrome 瀏覽器,無法顯示微軟正黑體做處理及決解。

更換了數次風格之後,也留意到 Blogger 範本設計工具,裡面沒有微軟正黑體、字距、行距調整選項,該如何說 blogspot 的 font 設置,算是以歐美體系為主,套用到中文字下,如沒做字距行距調整,看起來會有點擁塞,而微軟正黑體,則較些許圓滑。

 
文章的文字顯示部份,其實是最重要的,字體字形字色尺寸距離...等參數,有時還要考慮及測試,花掉頗久的時間,也會隨這時間的改變,要進行調整,比如 google chrome 瀏覽器,已經把預設的字體尺寸設為16px,這是和現今的螢幕大小及解析度有關,如果還設成12px,那麼文字,看起來就有點小了。

下述為 font 文字設置相關參數簡介,詳細還是要用 google 搜索一下 css font 字串,可找到一推。

font-style   是否用斜體 normal 或 italic 或 oblique
font-variant  小寫改成小型的大寫 normal 或 small-caps
font-weight  字體厚度 bold 粗體
font-size   字體的大小尺寸 16px
letter-spacing 字距 1px
line-height  行距 27px
font-family  字形 → 微軟正黑體,Microsoft JhengHei,MingLiU,sans-serif
color     字色 #333333




此處修改分2部份, body 全域 font 參數及 .post-body 文章 font 參數,因為有的子參數,會蓋掉父參數,有的不會蓋掉,而後面同參數會蓋掉前參數。

Ⅰ、一般我們會先進到 Blogger 範本設計工具 → 自訂,然後依個人喜好,設置好,所需的風格。

Ⅱ、在來 Blogger 範本設計工具 → 編輯HTML,點擊skin小箭頭,展開它





向下拉,找到 body {



去掉 font: $(body.font); 因為和我們要修改的參數重覆,然後貼上下述代碼

font-weight:bold;
font-size:16px;
letter-spacing:1px;
line-height:27px;
font-family:微軟正黑體,Microsoft JhengHei,MingLiU,sans-serif;



向下拉,找到.post-body {



去掉 line-height: 1.4; 及 font-size: 110%; 因為和我們要修改的參數重覆,然後貼上下述代碼

font-weight:bold;
font-size:16px;
letter-spacing:1px;
line-height:27px;
font-family:微軟正黑體,Microsoft JhengHei,MingLiU,sans-serif;






Ⅲ、如果對HTML修改,不太熟識,那麼用 Blogger 範本設計工具 → 進階 → 新增CSS,然後貼上下述代碼也可以,它會覆蓋掉先前的同參數,推薦使用此方式。

body {
font-weight:bold;
font-size:16px;
letter-spacing:1px;
line-height:27px;
font-family:微軟正黑體,Microsoft JhengHei,MingLiU,sans-serif;
}
.post-body {
font-weight:bold;
font-size:16px;
letter-spacing:1px;
line-height:27px;
font-family:微軟正黑體,Microsoft JhengHei,MingLiU,sans-serif;
}

貼上後,在點擊套用至網誌





Ⅳ、建議用 IE、firefox、chrome 這三種瀏覽器,分別檢視一下,看看效果如何。

Ⅴ、久久更換風格,會忘記如何修改,此篇算是記錄一下 font 的調整流程,未來 copy 一下就ok,有需要的網友,也可參考看看,當然參數,並非固定,要依當時,所用的風格skin,來進行調整及設置。

同分類文章 → http://zmc6.blog.fc2.com/blog-category-6.html




對上述圖文教學,還不太明白的話,請至下方連結,查看youtube視頻解說。

此篇教學之youtube視頻解說A:https://www.youtu.be/fFkqTHxt8YU

此篇教學之youtube視頻解說B:https://www.youtu.be/JAsHvIUSs5U


謝謝大家,抽空觀看,files備份檔名:blogspotguides 003a 003b

留言

秘密留言

No title

I loved as much as you will receive carried out right here.
The sketch is attractive, your authored subject matter stylish.
nonetheless, you command get bought an edginess
over that you wish be delivering the following.

unwell unquestionably come more formerly again since exactly the same nearly a lot often inside
case you shield this hike.