Blogger 筆記:網頁中文字型變更為正黑體或標楷體。

使用 Blogger 主題設計工具可以設定部落格版面各項字型,網站標題、文章標題、文章內容、側邊欄工具、、等等,每個項目都可逐一設定大小顏色與字體。只是預設的字型並沒有中文字型可以選擇,不管挑選哪種字型,變化的都是英文跟數字的部分,中文字始終顯示新細明體。想要更換部落格中文字體,可以編輯 HTML 添加喜歡的字型上去。

Blogger 範本更換字型

操作說明:
(編輯HTML前先備份範本,備份說明)

Blogger 管理後台「主題」→「自訂」開啟主題設計工具,可修改部落格主題。
Blogger 範本更換字型

「主題設計工具」→「進階」可調整文字字型、大小、顏色。
Blogger 範本更換字型

想要使用 Blogger 預設以外的字型,「編輯 HTML」將字型加入主題。
Blogger 範本更換字型

編輯 HTML:點擊第一個箭頭處,將隱藏的段落展開(行數不一定,依主題修改程度有所差異)。
Blogger 範本更換字型

Variable definitions:定義各項設定值,Page Text:網頁文字。
Blogger 範本更換字型

body.font:文章內文字型。
Blogger 範本更換字型

Variable name="body.font" description="Font" type="font"
default="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px 'Trebuchet MS',Trebuchet,sans-serif"

上段指令中「default」預設使用字型;「value」指定使用字型。將字型添加到 「value」段落中 15px (字體大小)後面。修改後如下:

Variable name="body.font" description="Font" type="font"
default="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px Arial, '文泉驛正黑', 'WenQuanYi Zen Hei', '儷黑 Pro', 'LiHei Pro', '微軟正黑體', 'Microsoft JhengHei', 'sans-serif'

其中「’文泉驛正黑’」=「’WenQuanYi Zen Hei’」,中文與英文表示方式都使用,因電腦系統若是英文會無法使用「文泉驛正黑」。同時添加多種字型,會按照順位依序替補,若觀看網頁的電腦無法使用第一種則使用第二順位。「sans-serif」則是通用字型.所有電腦都會有的。

字型若只有一個單字;如「Arial」;不需要加上單引號「’ ’」。兩個單字以上就須加上單引號;如:「’WenQuanYi Zen Hei’」「’文泉驛正黑’」。單引號在編輯 HTML 儲存後則顯示「& # 3 9 ;」字串。(如下圖)
Blogger 範本更換字型

這篇主要紀錄編輯 HTML 增加中文字型所學的,以備將來恢復記憶使用。若文章中有說明不清楚或是想瞭解更多,請參考下列文章。

參考文章:
修改各處 CSS(文章標題+內文+其他),以字型大小顏色舉例
網頁中英文字型(font-family)跨平台設定最佳化
打造部落格(一):讓版面更容易閱讀的幾個調整方案