PingFang TC 到了 Windows 會變成什麼字？蘋方後備字型與字重寫法

多數人以為，只要在 CSS 寫下 PingFang TC，所有用蘋果裝置瀏覽的訪客就會看到蘋方字型。可是 Apple 自己的字型清單，把蘋方標成「可下載」（downloadable），沒有列在預先安裝的那一類，Windows 與 Android 又根本沒有這套字型，所以這一行設定真正能保證的，只有「裝了蘋方的裝置才會用它」。

PingFang TC 是蘋方的繁體中文（台灣）版本，也是 Apple 的 Pages 說明頁建議台灣繁體中文使用的字型。它屬於系統字型，不像 Google Fonts 那樣由網站負責載入，所以光是把家族名稱寫對還不夠，後面接什麼後備字型、字重怎麼指定、lang 怎麼搭配，才決定訪客看到的畫面穩不穩。

這幾件事只要有一件沒處理好，設計稿上的字型層次到了另一台裝置就會變樣。

蘋方 PingFang TC 是什麼？

蘋方（PingFang，簡體中文寫作「苹方」）是 Apple 的中文系統字型。Apple 在 OS X El Capitan 的 App Store 說明裡寫道，PingFang 是新的中文系統字型，為了讓簡體與繁體中文都清晰易讀而設計。El Capitan 是 2015 年推出的 OS X 10.11，蘋方就是在這個版本以新字型的身分出現。

名稱裡的 TC 代表 Traditional Chinese，也就是台灣使用的繁體中文版本。Apple 的 Pages 說明頁在建議字體裡，把台灣繁體中文對應到 PingFang TC，所以台灣網站要指定蘋方，寫的就是這個家族名稱。

蘋方是裝置上的系統字型，不是網站可以用連結載入的網頁字型。CSS 的 font-family 只是請瀏覽器去訪客的裝置上找這個名稱，找得到就用，找不到就換清單的下一個。至於每台 Apple 裝置是不是都已經裝好蘋方，則不能直接假設，要看 Apple 自己的字型清單怎麼標示。

蘋方分成 4 個地區版本，台灣網站使用 TC

蘋方不是單一檔案，而是依書寫地區拆成四個字型家族。Apple 的 macOS Sequoia 字型清單列有 PingFang HK、PingFang MO、PingFang SC、PingFang TC 四個家族，每個家族各有 Ultralight、Thin、Light、Regular、Medium、Semibold 六個字重。

台灣網站用的是 TC。若把 SC 排在 TC 前面，等於拿簡體中文地區的字形設計去排繁體頁面，字形細節會和台灣讀者慣用的寫法不同。

CSS 裡要寫完整的家族名稱，並加上引號寫成 “PingFang TC”。MDN 建議含空白、數字或標點（連字號除外）的家族名稱一律加上引號，這個名稱中間有空格，加了引號最不容易出錯。

蘋方只存在於 Apple 平台，其他系統各有各的中文字型

寫了 PingFang TC，訪客看到的字型會因裝置而不同。Mac、iPhone、iPad 這些 Apple 平台是蘋方的涵蓋範圍，Windows 沒有蘋方，網頁會落到微軟正黑體，Android 與 Linux 看到的多半是 Noto Sans CJK 系列，或各家廠商自訂的字型。同一份 CSS 在不同裝置上字形本來就不一樣，這不是設定出錯。

最容易被誤會的反而是 Apple 平台本身，很多人預設蘋方一定已經裝在每台 Apple 裝置上，Apple 的公開清單卻不是這樣標示。

Apple 公開清單把蘋方標為可下載，而非預先安裝

Apple Developer 網站的 System Fonts 清單，開頭先把字型分成兩類：Apple 平台附帶許多預先安裝、可供 App 介面使用的字型，另外有些字型要在各平台下載。清單裡的 PingFang HK、MO、SC、TC，每個字重在 iOS 與 macOS 都標為 downloadable，也就是可下載。作為對照，同一份清單的 Heiti TC 在 macOS 標為 system font，在 iOS 則同樣標 downloadable。

Apple 另一份 macOS Sequoia 字型清單頁也說明，清單裡大部分字型會自動安裝並啟用，其餘的可以用字體簿（Font Book）下載。把兩份清單合起來看，Apple 並沒有承諾每台裝置一定已經裝好蘋方。

所以 font-family 後面一定要接後備字型，而且要拿實際的 Apple 裝置驗證，別把蘋方當成每台 Apple 裝置都保證會有的字型。

Windows 改由微軟正黑體顯示中文

Windows 沒有蘋方，繁體中文網頁在 Windows 上的預設落點是微軟正黑體（Microsoft JhengHei）。根據 Microsoft Learn 的字型頁，Microsoft JhengHei 與 Microsoft JhengHei UI 隨 Windows Vista 作為預設介面字型發行，Windows 7、8、8.1、10、11 都有供應。

這個家族有 Light、Regular、Bold 三種粗細，另有 UI 版本，CSS 裡寫 “Microsoft JhengHei” 即可。只有三級粗細這一點，會影響後面的字重設定。

Android 與 Linux 常見的 Noto Sans CJK TC

Android 與 Linux 的中文字型，要看系統設定與安裝的字型而定。根據 W3C clreq 文件整理的系統字型對照，Android 的 AOSP fonts.xml 會把 zh-Hant 對到 Noto Sans CJK 的繁體中文字型，所以大致看到的是 Noto Sans CJK 系列，不過各家手機廠商也可能換成自己的字型，無法一概而論。

Linux 沒有單一的系統字型清單，情況取決於有沒有安裝字型套件。以 Debian 為例，Noto Sans CJK TC 由 fonts-noto-cjk 套件提供，但 clreq 特別註明這些都是套件相依的候選字型，不代表預設桌面一定已經安裝。這也是 font-family 清單要放 “Noto Sans CJK TC” 這個系統內名稱，最後再用 sans-serif 收尾的原因。

font-family 的完整寫法與各字型的分工

搜尋 pingfang tc 的人，多半是想直接拿到一串能貼進去的設定。下面這串堆疊把西文系統字型放前面，蘋方跟在後頭，再依序接上 Windows 與 Android 的後備，最後用通用字族收尾：

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif;
}Code language: CSS (css)

瀏覽器套用這串清單時，並不是找到第一個可用的字型，整串就只用它。根據 MDN 的說明，字型選擇是一次一個字元進行，某個字型缺了需要的字，才會試清單裡後面的字型。所以西文與中文可以由不同字型負責，這串堆疊的設計就是讓英文交給 -apple-system 或 Segoe UI，中文交給蘋方或微軟正黑體。

寫法上有兩條規則。含有空格的家族名稱（”PingFang TC”、”Microsoft JhengHei”）要加引號；通用字族 sans-serif 是關鍵字，不能加引號，而且要放在清單最後。MDN 也提醒，清單至少要放一個通用字族，因為沒有任何字型能保證一定存在。每台裝置實際只會用到清單裡的其中幾項，其餘都是替別的裝置準備的。

西文系統字型排在蘋方之前

堆疊前半段的三個名稱，各自負責一個平台的西文。-apple-system 讓 Safari 在 Apple 平台使用系統的西文字型，WebKit 的部落格說明，這個值在 iOS 9 與 OS X 10.11 可以取得 Apple 的新系統字型 San Francisco，不支援的平台會直接退到清單的下一項。BlinkMacSystemFont 是 Chrome 在 Mac 上對應 -apple-system 的名稱，Segoe UI 則是 Windows 的介面西文字型。

這三項都只負責西文，沒有中文字形。瀏覽器遇到中文字，發現它們缺字，就依清單往後找，所以中文字會自動落到蘋方或微軟正黑體，不會誤用前面的西文字型。

另一個常見寫法是 system-ui。根據 MDN 的相容性資料，system-ui 從 Chrome 56、Safari 11、Firefox 92 起支援，主流瀏覽器現在都能用。不過 MDN 提醒，system-ui 的用意是讓介面元件貼近原生 App，不適合排版大段文字。Windows 的 CJK 預設字型可能把拉丁字母排得不好看，lang 屬性也可能不影響實際顯示的字型。這串堆疊因此不拿 system-ui 當內文字型。

後備字型與通用字族收在最後

堆疊後半段的分工很直接。PingFang TC 給 Apple 裝置，Microsoft JhengHei 給 Windows，Noto Sans CJK TC 給 Android 與裝了 Noto 字型的 Linux，sans-serif 收尾。前面全部沒命中時，通用字族保證瀏覽器仍會挑出一個無襯線字型，網頁不會退回預設的襯線字型。

Apple 自己的網站樣式表也是這樣收尾。它給繁體中文的宣告是 font-family:"SF Pro TC","SF Pro Display","SF Pro Icons","PingFang TC","Helvetica Neue","Helvetica","Arial",sans-serif，蘋方排在 SF Pro 系列之後、Helvetica Neue、Helvetica、Arial 之前，最後接 sans-serif，並沒有列出微軟正黑體，Windows 訪客靠 Arial 與通用字族處理。其中的 SF Pro 是 Apple 的網站自己載入的字型，一般網站不要抄進堆疊。

Microsoft JhengHei 其實可以不寫。在 Windows 的 Chrome 預設設定下，lang 為 zh-TW 時單靠 sans-serif 也會落到微軟正黑體。寫出來是讓意圖更明確，日後有人調整堆疊時，一看就知道這一項是替 Windows 準備的。

html 的 lang 宣告 zh-TW 並搭配 PingFang TC

很多人只改 font-family，卻漏了 html 的 lang 屬性，瀏覽器挑字形就少了一項依據。W3C 說明，中文、日文、韓文常共用同一個漢字碼位，各語言讀者預期看到的字形在細節上會有差異，瀏覽器也會參考 lang 挑選適合該語言的字型。台灣、中國大陸與香港的中文寫法同樣有這類細節差別，沒有 lang 可以參考時，瀏覽器只能照系統預設去挑。

沒有指定中文字型名稱時，lang 就是瀏覽器挑字型的主要線索。在 Windows 的 Chrome 上用開發者工具檢視實際繪出的字型，只寫 sans-serif 的情況下，lang 為 zh-TW 或 zh-HK 時落到微軟正黑體，lang 為 zh-CN 則落到 Microsoft YaHei。

system-ui 的結果不一樣。同樣在繁體中文版 Windows 的 Chrome 上，不論 lang 是 zh-TW 還是 zh-CN，system-ui 都落到 Microsoft JhengHei UI，也就是作業系統的介面字型，lang 沒有發揮作用。這和 MDN 對 system-ui 的提醒一致，也是內文堆疊不用 system-ui 的理由。

台灣網站要宣告 zh-TW，字型清單也只放 TC 版本。以一般 WordPress 繁體中文站為例，前台的 html 標籤會長這樣：

<html lang="zh-TW">Code language: HTML, XML (xml)

font-family 與 lang 要一起設才穩，蘋方的版本也要和 lang 對得上，zh-TW 頁面不該讓 PingFang SC 排在前面。

繁簡內容並存時改用 lang 選擇器分流

網站同時有繁體與簡體頁面時，可以用 :lang() 選擇器，讓兩種語言各用各的蘋方版本與後備字型：

:lang(zh-TW) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif;
}

:lang(zh-CN) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}Code language: CSS (css)

簡體堆疊的 Windows 後備換成 Microsoft YaHei（微軟雅黑），Android 與 Linux 的後備換成 Noto Sans CJK SC。選擇器用 :lang() 而不用 [lang="zh-TW"]，是因為 W3C 說明 :lang() 會看到從外層元素繼承來的語言值，屬性選擇器則只對自己帶有 lang 屬性的元素生效。只有單一語言的網站可以跳過這一段。

蘋方字重只到 Semibold，Windows 的粗細並不相同

設計稿最常遇到的落差，是蘋方沒有 Bold。蘋方的字重只到 Semibold（600），微軟正黑體則有 Bold（700），同一個 font-weight 數值在兩個系統會落到不同粗細，Mac 上細緻的層次，到了 Windows 還會被壓平。

實務上的處理並不複雜，內文與標題只用兩邊都有明確落點的字重，並接受標題在 Windows 上會偏粗一些。

蘋方 6 個字重與微軟正黑體的 CSS 數值對照

Apple 的字型清單只列字重名稱，沒有標出對應的 CSS 數值。下表依 MDN 的通用字重名稱推得大致對照，用來比較兩個家族各有哪些字重。Apple 的字重命名和 CSS 的通用名稱略有出入，蘋方的 Ultralight 比 Thin 更細，所以 Ultralight 與 Thin 分別大致對應 CSS 的 100 與 200。

蘋方沒有 700 與 800 以上的字重。微軟正黑體則只有三級，Light、Regular、Bold 分別對應 300、400、700。

font-weight 500 與 700 在 Mac 和 Windows 的落點不同

指定的字重不存在時，瀏覽器會照固定規則挑替代字重。根據 MDN 的說明，指定值大於 500，先往更粗的找，找不到再往更細的找；指定值在 400 到 500 之間，先找介於指定值與 500 的字重，再往更細找，最後才往更粗找；指定值小於 400，先往更細找，再往更粗找。這套備援只影響渲染，computed 值仍是原本指定的數值。

套到兩個家族上，結果是 700 在蘋方找不到更粗的，退到最接近的較細字重 Semibold（600）。500 在微軟正黑體沒有，往下取 Regular（400）；600 在微軟正黑體往上取 Bold（700）；100 與 200 則往上取 Light（300）。

在 Windows 的 Chrome 上用開發者工具檢視實際字型，結果和上面的推演一致，100 到 300 都是 Light，400 與 500 是 Regular，600 以上是 Bold。也就是說，Mac 上 Medium 與 Regular 的細微差別，到了 Windows 會消失，這是備援規則造成的，不是 bug。

落到具體數值，內文用 400，需要淡一點時用 300，標題用 700，Mac 上的標題會是 Semibold，Windows 上是 Bold，粗細略有差距但層級一致。100、200、500 這幾個值在 Windows 會被併到鄰近字重，設計時就別依賴它們。

把字型堆疊放進 WordPress 的 2 個位置

用 WordPress 架站時，寫好的 font-family 要貼到哪裡，取決於用的是區塊主題還是傳統主題。這裡放的只是系統字型堆疊，不涉及字型檔。

建議先用 Styles 介面能做到的設定，不夠時再寫自訂 CSS，要長期保留的設定則得放在換主題也不會被清掉的位置。

區塊主題寫在 theme.json

區塊主題把字型堆疊寫在 theme.json 的 settings.typography.fontFamilies。這是一個陣列，每一筆有 slug、name、fontFamily 三個欄位，fontFamily 填入完整的堆疊字串：

{
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "slug": "system-tc",
          "name": "繁中系統字型",
          "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans CJK TC', sans-serif"
        }
      ]
    }
  }
}Code language: JSON / JSON with Comments (json)

JSON 的字串本身就用雙引號包住，所以字型名稱改用單引號，才不會和 JSON 的引號衝突。WordPress 會依 slug 產生 –wp–preset–font-family–system-tc 這個 CSS 變數，之後在樣式裡引用這個變數就能套用。

想使用 Google 字型這類網頁字型檔的話，WordPress 內建的字體庫功能可以管理，這個範例只放系統字型。

傳統主題與一般網站寫在 CSS

傳統主題從後台的「外觀」→「自訂」→「額外的 CSS」貼上。區塊主題也可以在網站編輯器的 Styles 介面開啟 Additional CSS，這個編輯器從 WordPress 6.2 起內建，點開 Styles 頁面的三點選單就能找到。一般非 WordPress 網站則直接寫進樣式表：

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif;
}

h1, h2, h3, h4, h5, h6, button, input, select, textarea {
  font-family: inherit;
}Code language: CSS (css)

只設 body 常常不夠。主題可能替標題、按鈕或表單欄位另外指定字型，這些元素不會跟著 body 走，所以範例把它們一併設成繼承。Additional CSS 在更新主題後會保留，但它綁在目前的主題上，換了主題就不再生效，要長期放著，寫進子主題的樣式表或 theme.json 比較保險。

用開發者工具確認實際套用的字型

CSS 寫完不代表字型真的套上。Chrome 團隊的文章形容字型堆疊比較像建議而不是命令，實際用哪一款由訪客的瀏覽器依裝置決定，開發者工具則能顯示最後選到哪一個。

驗證要在實際會看到頁面的裝置上做，因為每台裝置落到的字型都不同。

Computed 分頁的 Rendered fonts 列出實際字型

在頁面上按右鍵選「檢查」，於 Elements 面板選取要檢查的元素，例如一段內文，再切到右側的 Computed 分頁，捲到最底下的 Rendered fonts 區塊。這裡列的是 Chrome 的文字繪製層實際用來畫出文字的字型，每一筆會標示字型名稱，以及它是本機字型還是網路載入的資源。

這個欄位省去了猜測。sans-serif 在這台裝置上解析成哪一款，會直接顯示出來。看到非預期的字型時，優先檢查三件事：堆疊的順序、家族名稱的拼字（拼錯的名稱會被默默略過），還有 html 的 lang。

沒有 Apple 裝置時，只能確認後備字型是否生效

Windows 電腦上看不到蘋方，只能確認後備字型有沒有接上。要看蘋方本身，必須用 Mac、iPhone 或 iPad 開同一個頁面。

分工因此很清楚，在 Windows 驗證微軟正黑體的後備有沒有生效，在 Apple 裝置驗證蘋方。同一個頁面在兩邊的字重差異，對照前面字重那一節的表格，就能判斷是否符合預期。

蘋方屬於系統字型，不要打包成網頁字型上傳

想把蘋方下載下來、放到自己的網站之前，要先分清楚兩種用法。font-family 只是請瀏覽器使用訪客裝置上本來就有的字型，網站沒有散布任何字型檔；用 @font-face 上傳字型檔，則是網站自己提供字型讓訪客下載，兩者適用的授權範圍並不相同。

Apple 的 macOS Sequoia 軟體授權協議，字型條款寫明可以在執行該軟體時，用內含的字型顯示和列印內容，而要把字型嵌入內容，必須是該字型自己的嵌入限制允許才行，這些限制可以在字體簿的字型資訊面板查看。

因此不要把蘋方檔案轉成 woff 或 woff2，再用 @font-face 上傳到網站，也不要去第三方網站下載來路不明的副本。這份條款允許的是在執行 Apple 軟體時顯示與列印，並沒有開放把字型檔拿去網站散布，實際條件請以 Apple 的授權條款為準。

Windows 的微軟正黑體同理。Microsoft Learn 的字型頁，在授權與再散布資訊裡，把企業、網頁開發者與軟硬體再散布列為要另外取得字型授權的情境，所以網頁要散布這款字型，必須另行取得授權。想在網頁上提供字型檔，就改用授權允許的開源字型。

需要各平台一致時改用 Noto Sans TC

想讓 Mac 與 Windows 看起來一致，做法是放棄依賴系統字型，改由網站自己提供一套開源字型。根據 Noto CJK 專案的授權檔，這套字型依 SIL 開放字型授權（OFL 1.1）發行，可以自由使用、研究、修改與再散布，條件包括字型本身不能單獨販售、修改後的版本要沿用同一套授權，這讓 Noto Sans TC 成為常見的選擇。

要讓這個做法生效，Noto Sans TC 得排在蘋方之前，否則 Mac 仍會優先使用蘋方：

body {
  font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif;
}Code language: CSS (css)

後面接的仍是原本那串後備，萬一網頁字型沒載入成功，訪客還是看得到系統字型。代價是訪客要多下載一份字型檔。

Noto Sans TC 與 Noto Sans CJK TC 的名稱差異

同一套字型在 Google Fonts 叫 Noto Sans TC，在 Android 或 Linux 裡叫 Noto Sans CJK TC，常讓人以為是兩套不同的字型。根據 Noto CJK 專案的說明，這些字型也放在 Google Fonts，但名稱和專案裡不同，兩個字母的地區代碼會換成全名，例如 TC 對應 Traditional Chinese，所以 Google Fonts 頁面上顯示的是 Noto Sans Traditional Chinese，CSS 裡的家族名稱則是 “Noto Sans TC”。

前面的堆疊因此兩個名稱都放，”Noto Sans TC” 對應自行提供的網頁字型，”Noto Sans CJK TC” 對應系統已經裝好的字型。自行提供網頁字型時，用的名稱要和 @font-face 宣告的 font-family 一致。

Noto Sans TC 單一字重約 2.14MB 的下載成本

站內另一篇測試文章發現，Noto Sans TC 只要一個字重（400），透過 Google Fonts 提供時會被拆成 105 個檔案，全部下載完約 2.14MB。瀏覽器實際只會抓頁面用到的分塊，但文章越多、用字越廣，累積的下載量就越接近這個數字。換成開源字型換來了各平台一致，也換來這筆下載成本。

內容型網站預設用系統字型堆疊就夠了，只有品牌規範明確要求各平台一致時才換，換之前也要先評估子集化、font-display、自行代管這些降低載入成本的做法。

蘋方有就用，沒有也不會讓版面失控，這是好的 pingfang tc 設定該有的樣子。寫好之後，找一台 Apple 裝置與一台 Windows 電腦各開一次頁面，確認兩邊落到的字型都在預期之內，這份設定就算完成。