Windows 仿宋體無法在網頁正確顯示?用這個 Google font 的 CSS 解法一次搞定!
在中文網頁設計中,「仿宋體」經常被使用於正式文件、教育類型或傳統風格網站,但許多前端開發者會發現:即使在 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