Windows 仿宋體無法在網頁正確顯示?用這個 Google font 的 CSS 解法一次搞定!

2025-04-16

在中文網頁設計中,「仿宋體」經常被使用於正式文件、教育類型或傳統風格網站,但許多前端開發者會發現:即使在 Windows 作業系統中存在仿宋字型,卻無法透過 CSS 正常呈現在網頁上。

 

你可能已嘗試以下做法:

 

❌ 這個方法行不通

font-family: "仿宋", "FangSong", "仿宋_GB2312", serif;

 

但實際結果仍無法呈現仿宋風格,甚至回退成標楷體、宋體或預設 serif 字型,影響整體設計一致性。這個問題讓人困擾,因為不僅在 Google Fonts 中找不到仿宋體,連一般安裝字型也無法解決。

 

 

問題關鍵:仿宋體不在 Google Fonts、系統名稱不一致

Windows 系統內的仿宋體名稱在不同地區版本(繁中、簡中、英文)不一致,瀏覽器也不一定會識別 "FangSong" 為有效字型。此外,Google Fonts 主站並未提供仿宋體,許多開發者因此誤以為無解。

 

解決方案:使用 Google 提供的 cwTeXFangSong 字型

幸好,Google 雖未在主站上列出,但早在 Google Fonts Early Access 計畫中 提供了幾套開源中文字型,其中就包含「cwTeXFangSong(仿宋體風格)」。

 

https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css

 

 

✅ CSS 實作方式如下:

 

@import url(//fonts.googleapis.com/earlyaccess/cwtexfangsong.css);

.font11 {
font-family: 'cwTeXFangSong', serif;
}

 

將上述程式碼加入你的 CSS 中,再套用 .font11 類別 Class 即可讓網頁中的文字正確套用仿宋體風格,跨平台也能穩定顯示。

 

 

實作範例如下:

 

這個是仿宋體

 

 

其他教學網頁參考:

https://linjinlu.blogspot.com/2017/09/google-font-css.html