Skip to content

如何在WordPress更改文章的字體以及大小?5分鐘提升網站美化的小細節

  • by

雖然說現在Wordpress已經可以利用套版的方式去擁有,但套版畢竟還是套版,有些部分對於美感較為敏感的人來說就很不舒服,像是字體的部分,因此,這篇文章就來談談如何更改字體以及大小。

文章字體更改

在過去網路還不是那麼發達世代,字體通常都需要自己抓然後上傳到該網站後台,而如今在這網路世界發達世代,可以利用網路字體的概念傳上去。

網路字體是什麼概念?

可以想成是一個雲端的概念,許多字體都被工程師拿來放到雲端以後再把他轉成代碼,就可以使用了,網路字體就像中繼站一樣,而這個中繼站都有許多公司在開發於此。

你可能會有一個疑問,那這樣不就代表如果使用這家公司的代碼後,萬一倒了怎麼辦?

基本上無須擔心這件事,倒了可以換另一個代碼或者使用大型企業釋出的代碼,下面將會給你幾家公司,有付費也有免費。

  • Google font:Google是大型企業,開發出這套系統後,當時引起設計圈各種驚艷,因為一般常理來說,開發中文字體是非常耗人力與心力的事,Google竟釋出免費的字體,超扯。
    對了,這邊的字體所有都是免費的。
  • Fonts.com:專攻於英文,頂級的英文字體都在這裡,若你有看到想要的字體的話,需要付一些錢去資助他們。
  • Justfont:這是台灣人所創辦的一家字型開發公司,主要專攻中文字體,收入各式各樣中文字體,這需要付費,若不確定可不可以用可以寫信給他們或者想認識更多字體可以到字嗨社團。

我不知道要選什麼字體

雖然說字體百百種,對於選擇障礙的人根本不知道如何選擇好看字體,本人過去職業是平面設計師,這邊比較推薦比較多人使用的字體—思源黑體(Noto家族)

如何在Wordpress更換文章的字體?

Step1.wordpress後台

首先到Wordpress後台的外觀找到自訂

Step2.前端介面設定

於是就跳到前端的介面設定,這邊每一個人的左邊介面有些不一樣,取決於你選甚麼佈景主題,通常會看到Typography選項。

然後可能會有General這個選項,如果沒有那就每一個都選選看。

之後在Body下方看到Font family可以選擇Noto sans

下方的Additional Font Variants原則上都不用動他。

Step3.發布

最後在上方按下發布就成功了。

如何改變字體大小?

在前端介面後台中找到General後,找到Font size設定數值,這邊是以Pixel去算的,基本上20就是良好視覺。

Font size旁邊有手機平板等符號,這是響應式,都可以個別查看與設定。

若你想調整更多細節可以參考下面一章節的內容中會找到各種Font size設定。

延伸閱讀:6種方法更改WordPress的文字顏色的密技指南,讓網站內容更豐富

如何將標題與內文的的字體分開?

基本上是不建議這麼做,這很細微的東西只怕做壞了反而GG,但還是可以試試看。

在我的後台中(你的不一定會有),可以看到有三個選項:

  • General
  • Headings
  • Blog

在General是屬於設定網站的字體,也就是設定Body的字體;在Headings設定是屬於你的標題、小標題等設定,也就是H1、H2、H3等設定這都可以將標題與內文的的字體分開;最後,Blog更細緻了,設定你的部落格文章的行距設定。

如何手動更改字體?

在這之前必須先下載Insert Headers and Footers或者Code Snippets外掛,把你擁有的網路字體代碼貼上去就可以了。

延伸閱讀:WordPress超級實用外掛,只要用5個程式碼片段就可以成為強大網站

或者

還有另一個方法,直接在後台中找到附加的CSS點開來。

複製下方的微軟正黑體代碼

body {
    font-family: Helvetica, 'PingFang TC', "微軟正黑體", "Microsoft JhengHei", sans-serif !important;
}

h1,h2,h3,h4,h5,h6{
    font-family: Helvetica, 'PingFang TC', "微軟正黑體", "Microsoft JhengHei", sans-serif !important;
}

再來貼到這個地方並發布就完成了。

結論

基本上中文網站都會有兩種字體,Microsoft 的「微軟正黑體」以及 Google 的「思源黑體」(Noto Sans TC),因為我們中文有非常多中文,每一個中文字,就會佔據容量,想想看一篇文章要做深度內容有上千個字每一篇都這樣寫,那是一筆不小的容量。

所以這兩套字體可以利用程式碼方式寫入,與一般英文字體有26個字母載入速度相當。

如果,你想跳脫這兩個中文字體的話也是可以,在文內的Justfont公司能辦到這件事。

你可能會喜歡…

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。