[筆記] 網頁跨平台文字設定 Font-Family

在網頁設定中,往往會被忽略的大概就屬 Font-Family 了。這 Font-Family 掌管著你的網頁最後呈現在使用者的瀏覽器上時,其字型究竟是怎樣被決定的。基本上,中文字型內有包含英文字型,還有各大作業系統的內建字型不同,同時還有使用者本地端語言的問題。

html logo


說明

1. 英文字型要在前,中文字型要在後

因為中文字型裡頭會包含英文字型。若中文字型在前,那後面的英文字型永遠不會被使用到

2.字型通用度小的要在前面

如果你將標楷體設定放在華康少女體前面,那後者也是永遠不會被使用到的

3.sans-serif 這個通用字型要放在最後

4.同一個中文字體,它的中文和英文名稱都要並陳

你不會知道使用者的電腦上是使用 “Microsoft JhengHei” 還是 “微軟正黑體”

通用設定參考


相關文章

  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 25
  • [筆記] TypeScript 拓展 Window 物件定義
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 24
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 23
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 22
  • [筆記] 篩選可用的時間區段 – 思路與邏輯
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 21
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 20
  • [筆記] yarn 安裝時出現 certificate has expired 的解決方式
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 19
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 18
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 17
  • [筆記] vite 開發實作替代 html 模版文字
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 16
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 15
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 14
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 13
  • [筆記] Vue3 在 vue 檔案以外的地方使用 vue-i18n
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 12
  • [筆記] 2024 從 Jest 轉移到 Vitest 過程筆記
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 11
  • [筆記] ESLint 8 → Eslint 9 升級指南 以 Vue3 + TypeScript + Prettier 為例
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 10
  • [筆記] Vite Plugin 生產正式環境下 過濾 Public 資料夾
  • [筆記] 如何在桌機瀏覽器上模擬 touch 事件
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 9
  • [筆記] Vueform Vue3 Multiselect 封裝
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 8
  • [筆記] Vite 開發與生產環境,注入內容到瀏覽器 window 物件中
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 7
  • [筆記] Promise.allSettled TypeScript 和批次 Batch 發送寫法
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 6
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 5
  • [筆記] HTML Vue3 Click Outside 實作與誤區
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 4
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 3
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 2
  • [筆記] 讓 SVG 得以自適應寬高縮訪放的方法
  • [筆記] Express + TypeScript + http-proxy-middleware 架設簡易開發 Proxy 伺服器
  • [筆記] 網站安全的必修課丨從 OWASP Top 10 實現全方位防禦強化 – 1
  • [筆記] 利用 Popper.js 下一代 Floating UI 撰寫 Tooltip 元件 – Vue3 & Jest
  • [筆記] 解決 Google Chrome 的 Added non-passive event listener to a scroll-blocking event 錯誤
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 80
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 79
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 77
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 76
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 75
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 74
  • [筆記] 增加 Dev Proxy 的指向彈性 – 多個 Axios 實例 Instance
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 72
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 71
  • [筆記] Tailwind CSS Safelist 設定
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 70
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 69
  • [筆記] 純 CSS Blur 創造模糊效果
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 68
  • [筆記] Vue3 搭配原生 swiper js 進行使用
  • [筆記] 使用 Google Maps 的自製地圖 iFrame 來標示多個地點
  • [筆記] Vue3 onMounted 無法獲得 DOM 的原因和解法
  • [筆記] JavaScript 跨日判斷與非連續時間範圍檢查
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 67
  • [筆記] Jest Vue3 測試含有 Teleport 的元件
  • [筆記] 理想中的 HTML Modal 切版作法
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 66
  • [筆記] JavaScript HTML 多個 Modal 避免底層捲軸滾動
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 65
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 64
  • [筆記] npm-run-all 傳遞參數
  • [筆記] Vue3 Jest Composition API Setup TypeScript 測試取得 computed 的型別
  • [筆記] unplugin-icons 搭配 Jest 使用時得以編譯過的方法
  • [筆記] Vue3 TypeScript Vite 多頁面模版製作開發心得
  • [筆記] 在 pnpm 上使用 npx 語法
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 60
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 58
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 56
  • [筆記] HTML height:0 到 height: auto 的動畫效果實現
  • [筆記] 如何隱藏 Scrollbar 但保有滾動效果
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 52
  • [指南] 既存 JavaScript + HTML + CSS 原生頁面打造新功能的一些心法
  • [筆記] Chrome DevTools 改寫特定 API 的 Respose Header 加速開發
  • [筆記] Nuxt 關於 SCSS 的引入寫法注意事項
  • [筆記] Sticky Footer 實作方式收集
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 44
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 43
  • [筆記] Node.js Express 撰寫單元測試 Unit Test 思路和踩坑記錄
  • [筆記] QR Code 之 Quiet Zone 的重要性
  • [指南] 從頭開始 – 前端網頁工程師之開發環境架設
  • [筆記] 在一台電腦上 操作多個 Git Config
  • [筆記] HTML5 InnerHTML InnerText 的差異
  • [筆記] 程式必修課!資料結構與演算法|JavaScript 篇 – 21
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 30 – 佈署發佈
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 29 – Toast
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal
  • [面試] 2024 前端工程師面試心得
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 25 – Skeleton
  • [筆記] HTML z-index 父層 子層 和 Stacking Context
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 24 – Spin
  • [筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination
  • 按讚加入粉絲團

    延伸閱讀