前言
已經套用CSS樣式後，想要調整文字字型？沒問題！
示範主題：CSS樣式：粉藍夢境系｜漸層風格｜2欄
三步驟更改文字字型開始
①挑文字字型：複製 CSS font-family 欄位
常見繁體中文字型預覽：
| 字型 | CSS font-family | 備註說明（適合用途） |
|---|---|---|
| 微軟正黑體 | "Microsoft JhengHei", sans-serif | Windows 系統預設繁中字體，字形方正、筆劃清晰，在電腦螢幕上顯示效果佳，是網頁正文、介面文字的通用且安全選擇。給人現代、穩重的感覺。 |
| 蘋方-繁 | "PingFang TC", sans-serif | macOS/iOS 預設字體，現代扁平風格介面最佳選擇。 |
| 思源黑體 | "Noto Sans CJK TC", "Source Han Sans", sans-serif | Google 開源字體，跨平台相容性佳，適合各種網頁應用、多語言環境 |
| 思源宋體 | "Noto Serif CJK TC", "Source Han Serif", serif | Google 開源襯線字體，適合長文閱讀、正式文件、學術、印刷用途的內文與標題排版 |
| 新細明體 | "PMingLiU", "新細明體", serif | 傳統宋體風格，適合正式文件，但小字可讀性較差。在低解析度螢幕可能顯示模糊 |
| 標楷體 | "DFKai-SB", "標楷體", serif | 正楷手寫風格，適合傳統文化、教育、書信風的設計，不建議用於小字號（<14px）文字 |
📌 選擇字體的建議：
- 考慮易讀性：選擇清晰、中性的字體如微軟正黑體、蘋方-繁、思源黑體。
- 考慮兼容性：為 font-family 屬性設定備用字體 (fallback fonts) 確保在特定字體無法載入時，瀏覽器能有替代字體顯示。例如 font-family: 第1順位字體, 第2順位字體, 備用字體;。
②在網站上先預覽文字字型：(可略過)
頁面任一地方 右鍵＞檢查 (F12)，
找到 元素>html標籤>html區塊 的font-family，改成想要的字型(在此示範思源宋體)。
③更改後台字體：👉 儲存前請先預覽看看效果
後台>樣式管理>部落格 CSS 原始碼 搜尋(Ctrl + F ) 到 html{ 的段落，取代原有的 font-family: 字體。
(在此示範思源宋體 font-family:"Noto Serif CJK TC", "Source Han Serif", serif !important;)
Do Re Mi So ~ 大功告成
請先 登入 以發表留言。