以往的文章裡雖然已經提過對於中文字的處理，但僅限於把必要字拆出然後顯示，而這一篇的目的，則是可以讓網頁完整顯示該字體
這裡處理的步驟為
- 字型子集化：僅取出常用的字，沒有包含在這裡面的字將會被正常顯示（可能取用系統的Serif類字體，像是臺灣就新細明體之類）
- 分割字體：將woff2字體自行切割成數個小檔案，之後壓縮採woff2字體
- 使用CSS語法：使用CSS語法將這些字體讀取後並顯示到網站上
基本上的流程為這樣，而這種做法是可以讓網站流量佔到最小（因為之前我使用的方式本來大約8MB的字體縮小至約880KB，也就是說減少了將近90％的大小），但我在這篇文章的做法，會是偏向頁面上有什麼字，就會讀取該字出來，所以說相對之前的做法，網站的流量會增加（也就是說這裡就必須靠CDN來減輕網站的負擔）
那麼在這篇文章的處理流程基本如下：
- 分割字體：這個服務是由中文网字计划提供，可以在這裡做字體的切割，並提供必要的檔案（包含CSS檔案以及.woff2字型）
- 上傳檔案到網頁主機
- 在HTML和CSS寫入相關設定並確認效果：這裡是本篇最難的地方，必須要有點HTML和CSS基礎（搭配開發者工具）才能達成，將相關設定分別寫入<HEAD>標籤內（可以使用插件）以及附加的CSS內
由於上面有提到最好有些HTML和CSS基礎相關知識，在處理上會比較順利些，但如果嫌麻煩的話，就還是建議參考之前的文章來做中文字型的處理方式吧
分割字體：
首先，你必須要自己準備「合適」的字體
為什麼我要特別強調「合適」的字體的原因是，可能網路上會有提供字體下載，但不見得「合法」，如果使用在網頁上顯示並使用的話，是會觸犯法律的；所以說找的字體最好是免費且允許可以商業使用，這樣才算最保險
例如全新 HarmonyOS 字体：這個字體是來自華為的HarmonyOS字體，可以拿來商業使用，所以用在網站上沒問題
如果真的有特殊糾結情感的話，cjkfonts 全瀨體我覺得也是個不錯的選項
上面的字體基本上已經涵蓋了亞洲語系，如果說你只有繁體中文內容的話，那我會建議饅頭黑體
而我目前選擇了使用cjkfonts 全瀨體來當作網站的門面（之前我用的是HarmonyOS 字体，但現在換cjkfonts 全瀨體，主要也是因為風格差異性較大，可能讀者比較會感到不一樣）
那麼接下來就是介紹如何利用「中文网字计划」服務來做字體切割
Step 01：進入中文网字计划網頁
Step 02：將字體拖入紅框處
Step 03：選取要分割的字體
Step 04：點擊「点击开始进行字体分包」按鈕
Step 05：開始處理字體分割
Step 06：分割完成！
Step 07：儲存至本地端
Step 08：記住字體名稱
我們可以得知這個字體叫做「cjkFonts 全瀨體」，字體名稱務必記住，因為後面將會要使用到
上傳檔案到網頁主機
接著是上傳檔案到主機上
在WordPress版本6.53之前，上傳壓縮包裡的檔案（包含副檔名.woff和.json格式）是沒問題的
但是到目前最新6.6.1版本時，就無法上傳上述檔案了
如果遇到這狀況，那就來求助外掛（Plugin）吧，修改wp-config.php有點麻煩就是（若後續沒有特別需求的話再移除就好）
解決無法上傳特定格式檔案
Step 01：尋找「Enhanced Media Library」的外掛並安裝
Step 02：進入設定
Step 03：增加支援上傳的檔案格式
Step 04：輸入相關資訊
| Extension | MIME Type | Singular Label | Plural Label |
| woff2 | font/woff2 | font/woff2 | font/woff2 |
| json | application/json | application/json | application/json |
輸入完畢後最後記得按下「儲存設定」按鈕，不然就等於做白工了
接著壓縮包內的所有檔案就都可以上傳到網頁伺服器了
在HTML和CSS寫入相關設定並確認效果
接下來這個是大魔王關卡，為什麼這麼說有一個最大原因是：要覆寫背景主題CSS的部分是最困難的，因為每個佈景主題的字型家族（font-family）放置方式也會不一樣的，我這裡會舉目前使用的佈景主題（Blocksy）和以前使用的佈景主題（Astra）來做說明
首先我分成兩個部份來講解，分別是HTML和CSS的資料輸入
HTML輸入的資料
HTML輸入的部分相對簡單，只要透過可以處理Snippet的外掛就行，只要在<HEAD>標籤的地方填入
<link rel="preconnect" href="https://memorywei.me.uk" crossorigin />
<link rel="stylesheet" href="https://memorywei.me.uk/wp-content/uploads/2024/08/Newresult.css" />這邊稍微講解一下
原則上，我們是務必採用CDN來傳輸我們的文字檔案，使其能夠更快顯示出來；因為我們使用的主機，不會比CDN傳輸資料來的好
<link rel=”preconnect” href=”https://memorywei.me.uk” crossorigin />的語法
是為了能夠讓一般使用者輸入cyrians.com後就能預先快速連線載入（並連動CDN內容）
<link rel=”stylesheet” href=”https://memorywei.me.uk/wp-content/uploads/2024/08/Newresult.css” />的與法則是要載入壓縮包裡的CSS檔案
這裡的路徑最好是對應CDN的路徑，這樣才能第一時間載入這個CSS檔案
我這裡是有更改CSS檔案名稱成為Newresult.css，其實這有其他用途，會在下面描述
基本上，HTML輸入的資料這邊就結束了，緊接著是重頭戲的CSS資料輸入
CSS輸入的資料
接下來CSS要輸入的資料我再分兩類，一個是務必輸入的，另一個則是依據不同的佈景主題而增加的CSS
必輸入的CSS
我們可以透過附加的CSS功能加入
我這裡的程式碼僅供參考，實際上得依據你CSS檔案的檔名還有路徑去做修正（甚至是搭配CDN的路徑）
@import url('https://memorywei.me.uk/wp-content/uploads/2024/08/Newresult.css');依據不同的佈景主題而增加的CSS
接下來是本篇的大魔王，前面的步驟其實很快就可以處理好（雖然文章整篇看起來有點長），但是接下來要寫入的CSS是必須搭配瀏覽器的開發者工具才能完成
我這裡的範例以Edge瀏覽器的開發者工具為主，然後再分Blocksy佈景主題和Astra佈景主題略做講解
Blocksy佈景主題加入的CSS程式碼
這時候我們開啟瀏覽器的開發者工具（鍵盤快捷鍵F12）
以HTML的概念中，字體相關設定都會是在<body>的標籤內，所以我們就是先點選<body>的區塊，接著下方篩選器內容輸入「font-family」來快速找我們想要看的地方
這時候我們可以看到有「font-family: var(–theme-font-family);」這一句，然後把稍早記下來的「cjkFonts 全瀨體」輸入※
※輸入成’cjkFonts 全瀨體’」或是「”cjkFonts 全瀨體”」都可以
很明顯的整個畫面的文字都和之前不一樣了，所以這裡的CSS程式碼可以寫
body, h1, h2, h3, h4, h5, h6, pre, kbd, code, samp, label, figcaption, .wp-block-quote, .wp-block-pullquote, .ct-label, .site-title, .entry-meta, .ct-menu-badge, .entry-excerpt, .ct-post-title, .ct-breadcrumbs, .ct-header-text, .ct-product-sku, .author-box-bio, .author-box-name, .ct-contact-info, .site-description, .page-description, .mobile-menu a, .menu .ct-menu-link, .comment-reply-title, .ct-footer-copyright, .ct-language-switcher, :is(.entry-summary,[data-products],.ct-trending-block,.ct-added-to-cart-product) .price, .woocommerce-tabs .tabs, .woocommerce-tabs .ct-accordion-heading, .woocommerce-result-count, .ct-header-account-dropdown, .ct-module-title:is(p,span), .related-entry-title:is(p,span), .woocommerce-loop-product__title:is(p,span), .woocommerce-loop-category__title:is(p,span), .ct-shortcuts-bar, .ct-widget>*, .ct-dynamic-data-layer, .ct-dynamic-filter, .ct-search-results, .tutor-ratings, .tutor-meta>*, .tutor-course-details-title, .tutor-course-details-actions>a, .ct-language-switcher ul[data-placement] {
font-family:"cjkFonts 全瀨體";
}但如果仔細看的話，其實會發現按鈕部分的文字沒變化，而且上面的CSS感覺又臭又長的
那麼是否有可能可以再減少這麼長的程式碼呢？答案是可以的
所以這裡的CSS程式碼
/* 覆蓋全站字體，可能依據佈景主題不同改變內容 */
:root {
--theme-font-family: 'cjkFonts 全瀨體';
}然後按下「發佈」按鈕儲存後就大功告成！
Astra佈景主題加入的CSS程式碼
就如同前面所述，每個佈景主題，他們的CSS寫的語法會不同，這裡特別拿Astra的佈景主題來講解
這裡CSS程式碼可以輸入
/* 版面全體字型 */
body, button, input, select, textarea, .ast-button, .ast-custom-button{
font-family:"cjkFonts 全瀨體";
}但是也可以簡化成
/* 版面全體字型 */
body{
font-family:"cjkFonts 全瀨體";
}只是這個寫法是只可以用在Astra佈景主題上，Blocksy佈景主題沒辦法這樣使用
雖然大部份的文字已經修改過，但是文章主題的標題，還有側邊工具列的標題還是一樣，所以我們這邊還要再做一些修正
這邊的CSS程式碼為
/* 文章標題字型 */
.blog .entry-title, .blog .entry-title a, .archive .entry-title, .archive .entry-title a, .search .entry-title, .search .entry-title a{
font-family:"cjkFonts 全瀨體";
}
這邊的CSS程式碼為
/* 側邊工作欄標題字型 */
.secondary .widget-title, .woocommerce-page #secondary .widget .widget-title{
font-family:"cjkFonts 全瀨體";
}同樣的，將這些CSS都寫入後就大功告成！
結語
其實如果說夠熟練的話，基本上10分鐘就可以搞定，但由於這屬於教學的關係，所以會看起來有點多
至於你說和以前的子集化和搭配HTTP/2併發下（同時傳送檔案），速度會慢很多嗎？
我想就實際拿PageSpeed Insights和WebPageTest的測試結果來看吧
整體來講，其實不能算太差，只是主機不夠力也是事實（使用的是共享主機A2hosting的Turbo Boost Web Hosting方案）
如果說主機效能再好些的話，或許狀況會再好些
真的要講缺點的話，就是流量會比以前大（加上他字型約每6～70KB就分割，所以會看到讀取很多檔案）
而上面有提到所謂使用不同的CSS檔案名稱的用意，其實是為了如不同地方（如文章標題等）所使用的，一個CSS檔案，就只能對一個字體系列作處理；如果是為了複數地方要放不同的字體，那也就是需要複數個CSS檔案來達成，而這些CSS檔案不會是同樣的名稱來做區分
所以說有特別需求的話，不妨可以自行嘗試看看做調整
以上為[WordPress]網站裡中文字型的處理 – 進階篇，希望能夠幫助你
參考資料：
中文网字计划
中文网字计划（GitHub）
HarmonyOS 字体
cjkfonts 全瀨體
Google Fonts 加持的高级中文字体子集化实现
只要花 30 秒登入 FB 或 Google，不用花任何錢就能支持我
您的支持將會是我創作的最大動力！
