Wordpress全局字體修改指南

前言#

很多時候，Wordpress 默認調用的字體顯示不佳，這個時候可以修改主題的默認字體，來達到想要的效果。

下面介紹的更換字體主要分為兩種，第一種是直接調用系統的字體，來替換原來主題的默認字體；第二種則是使用外置的字體文件，實現字體的替換。

第一種：直接調用#

這種方法通過修改 CSS 文件就可以實現，有些主題自帶了自定義 CSS 樣式的設置，Wordpress 也提供了這一入口（後台管理 -> 外觀 -> 自定義 CSS），這時候可以直接填入：

*:not([class*="icon"]):not(i) {
font-family: Segoe UI, "Microsoft Yahei" !important;
}

上面的例子就是將字體全局優先替換成Segio UI，其次替換成微軟雅黑，下面列舉幾個比較適合閱讀的字體，供大家替換，替換代碼中的Segio UI和Microsoft YaHei即可。

宋體（SimSun），微軟雅黑（"Microsoft Yahei"），華文黑體（STHeiti）
冬青黑體（ Hiragino Sans GB ），苹方（PingFang SC）
Arial，Times New Roman，Droid Sans

第二種：私有字體調用#

既然是私有字體，那就表示無法從公共庫中選擇，需要上傳到某個服務端來進行加載。

這裡可以選擇：1. 上傳至網站服務器 2. 上傳至 Github（推薦）3. 上傳至私有雲存儲進行調用

在這之前需要先做一項準備工作，字體文件通常只有一種格式，而為了滿足不同瀏覽器的需要，需要將其擴展為五種格式，分別為 **.ttf .eot .woff .woff2 .svg**

搜索即可找到在線轉換的工具，例如：在線字體轉換

1. 上傳至網站服務器#

這種方法存在風險，中文字體庫體積通常很大，比如現在正在使用的思源黑體，一個 ttf 文件就有 8M+，再加上國內服務器普遍帶寬很小，導致網站加載時間大大加長。

將前面準備好的五種字體格式全部上傳到網站的一個文件夾內，例如放在 /fonts 文件夾內，且統一命名，比如 siyuan.ttf,siyuan.svg 等等。
在自定義 CSS 樣式中輸入下列代碼：

@font-face {
font-family: '隨便一名稱，需要和下面的保持對應';
src: url('../fonts/yourfont.eot');
src:
url('../fonts/yourfont.eot') format('embedded-opentype'),
url('../fonts/yourfont.woff2') format('woff2'),
url('../fonts/yourfont.woff') format('woff'),
url('../fonts/yourfont.ttf') format('truetype'),
url('../fonts/yourfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
*:not([class*="icon"]):not(i) {
font-family: "與上面起的名字的對應" !important;
}

不是很推薦這種方法，建議還是使用下面的雲存儲托管。

2. 上傳至 Github 使用免費的 jsDelivr CDN 加速#

jsDelivr如何如何好用這邊就不多說了，Github怎麼使用這邊也不多說了，大體方法就是將你的字體文件上傳至 Github 自己的倉庫中，然後使用 jsDelivr 提供的加速服務來調用，方便好用重點還免費。

jsDelivr 調用格式 https://cdn.jsdelivr.net/gh/Github 用戶名 / 倉庫名 / 具體路徑

svg 文件大多會超過 20M，評論區小夥伴提醒 jsDelivr 調用文件超過 20M 會報錯，可以使用其他方式加載 svg，不過留在上面也沒什麼問題，基本上不影響正常使用。

附上幾個字體的調用鏈接（托管於 Github，使用 jsDelivr 加速服務）

AdobeCleanHanSC#

@font-face {
font-family: 'AdobeCleanHanSC';
src: url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.eot');
src:
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.eot') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.ttf') format('truetype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.svg') format('svg');
font-weight: 400;
font-style: normal;
font-display: swap;
}
*:not([class*="icon"]):not(i) {
font-family: "AdobeCleanHanSC" !important;
}

思源黑體#

@font-face {
font-family: 'siyuan';
src: url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.eot');
src:
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.eot') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.ttf') format('truetype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.svg') format('svg');
font-weight: 400;
font-style: normal;
font-display: swap;
}
*:not([class*="icon"]):not(i) {
font-family: "siyuan" !important;
}

筑紫 A 丸#

@font-face {
font-family: 'AWan';
src: url ('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/Awan.eot');
src:
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.eot') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.ttf') format('truetype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.svg') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
*:not ([class*="icon"]):not (i) {
font-family: "AWan" !important;
}

阿里巴巴普惠體 3.0#

@font-face {
font-family: 'AlibabaPuHuiTi';
src: url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/macos/AlibabaPuHuiTi/AlibabaPuHuiTi-3-55-Regular.eot');
src:
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/macos/AlibabaPuHuiTi/AlibabaPuHuiTi-3-55-Regular.eot') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/macos/AlibabaPuHuiTi/AlibabaPuHuiTi-3-55-Regular.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/macos/AlibabaPuHuiTi/AlibabaPuHuiTi-3-55-Regular.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/macos/AlibabaPuHuiTi/AlibabaPuHuiTi-3-55-Regular.ttf') format('truetype'),
font-style: normal;
font-display: swap;
}
*:not([class*="icon"]):not(i) {
font-family: "AlibabaPuHuiTi" !important;
}

3. 上傳至雲存儲進行調用#

在個人服務器上存儲字體文件的話，服務器需要在加載網頁、圖片等，同時等待加載字體，但使用雲存儲調用的話就可以在很大程度上解決網站加載慢的問題。

雲服務的話有很多選擇，如果你的網站還沒有開啟 HTTPS 的話，可以去使用免費的七牛雲存儲，如果開啟了 HTTPS 的話可以申請使用免費的又拍雲存儲或者使用收費的阿里雲 OSS。下面以阿里雲 OSS 和又拍雲雲存儲為例進行演示。

首先，將你先前準備好的四種格式的字體文件上傳至你的雲存儲中，雲儲存需設置為公有讀權限。

然後進入基礎設置 -> 防盜鏈，將你的域名添加進去，允許空 Refer，記得加 http (s)://，如下圖所示。

接著設置跨域規則，將你的域名添加進去，同樣需要加 http (s)://，允許 Headers 處填寫*

接下來就可以去自定義 CSS 了，填寫以下代碼：

@font-face {
font-family: '隨便一名稱，需要和下面的保持對應';
src: url('../fonts/yourfont.eot');
src:
url('../fonts/yourfont.eot') format('embedded-opentype'),
url('../fonts/yourfont.woff2') format('woff2'),
url('../fonts/yourfont.woff') format('woff'),
url('../fonts/yourfont.ttf') format('truetype'),
url('../fonts/yourfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}
*:not([class*="icon"]):not(i) {
font-family: "與上面起的名字的對應" !important;
}

至於又拍雲，在雲存儲配置完成後使用 FTP 工具登錄雲存儲空間並進行上傳後，即可使用文件的 URL 地址來進行使用。

又拍雲的雲存儲連接方式可參考官方文檔：文件管理指南 - 又拍雲存儲

總結#

由於目前還沒有很全的字體庫，所以第二種方法應該使用的比較多的。

如果你的服務器帶寬足夠大，或者開了 CDN 加速且不差錢的話，將字體文件放在網站服務器上絕對是沒什麼問題的，但沒有的話還是建議使用一個雲存儲來幫助網站加載那龐大的字體庫。

P.S. 有個程序叫字蛛，可以縮小網站字體體積，不過試了一下沒有成功，大家也可以照這個方向去研究研究。

更新：字蛛只支持靜態 html 壓縮字體體積，所以 Wordpress 無法直接使用。