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

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

html logo


說明

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

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

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

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

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

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

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

通用設定參考


相關文章

  • [指南] 使用 Bootstrap 的排版系統邏輯時,如何讓卡片維持等高
  • [筆記] Ultimate AWS Certified Developer Associate (90)
  • [筆記] Ultimate AWS Certified Developer Associate (89)
  • [筆記] Country Region Data – NPM 上共同維護的國家地區資料
  • [筆記] Ultimate AWS Certified Developer Associate (88)
  • [筆記] Ultimate AWS Certified Developer Associate (87)
  • [指南] 整合 Google Tag Manager 和導入 Google Analytics 4 概念和問與答
  • [筆記] Ultimate AWS Certified Developer Associate (86)
  • [筆記] Ultimate AWS Certified Developer Associate (85)
  • [筆記] Ultimate AWS Certified Developer Associate (84)
  • [筆記] Vue3 TypeScript 版本的 JSON Editor – vue3-ts-jsoneditor
  • [筆記] Ultimate AWS Certified Developer Associate (83)
  • [指南] Better Ruler 前端開發必備的網頁測量小工具
  • [筆記] Ultimate AWS Certified Developer Associate (82)
  • [筆記] TypeScript Eslint 解決 ES2015 module syntax is preferred over custom TypeScript modules and namespaces. 錯誤
  • [筆記] TypeScript + Vite + Vue3 使用 setup 無法使用 Enum 的探究和解法
  • [筆記] Ultimate AWS Certified Developer Associate (81)
  • [指南] WangEditor 點選工具列選單 噴出 Unable to preventDefault inside passive event listener invocation 錯誤
  • [指南] 用 FormData 傳送 array 陣列資料的幾種方法
  • [筆記] 透過 CSS 將文字以直式的方式呈現
  • [筆記] Ultimate AWS Certified Developer Associate (80)
  • [指南] 前端開發必備 JSONPlaceholder 讓你輕鬆獲取假資料填充網頁
  • [筆記] Ultimate AWS Certified Developer Associate (79)
  • [筆記] Google Tag Manager 之 GA 事件參數取得的各種方法
  • [筆記] Ultimate AWS Certified Developer Associate (78)
  • [指南] 如何讓使用者點擊一個圖片連結,是直接下載而不是在畫面上顯示
  • [筆記] Pure CSS 打造右側出現的 OffCanvas 效果
  • [筆記] Ultimate AWS Certified Developer Associate (77)
  • [筆記] 在 Vue 中用 Vanilla JavaScript 方法來打造無限滾動 Infinite Scroll
  • [筆記] Ultimate AWS Certified Developer Associate (76)
  • [筆記] Vue ScrollView 來打造無限捲動 Infinite Scroll
  • [筆記] Git rebase 專案的第一筆 commit
  • [筆記] Ultimate AWS Certified Developer Associate (75)
  • [筆記] Ultimate AWS Certified Developer Associate (74)
  • [筆記] 使用 Normalize.css 時,請記得調整 box-sizing 計算方式
  • [筆記] Ultimate AWS Certified Developer Associate (73)
  • [筆記] CSS 製作漸層色的邊框
  • [指南] SVG Repo 超過 300000 個的免費 SVG 查詢和下載
  • [筆記] Ultimate AWS Certified Developer Associate (72)
  • [筆記] JavaScript 判斷使用者為 iOS、Android 或是桌機
  • [筆記] Ultimate AWS Certified Developer Associate (71)
  • [筆記] 六角學院 2022 React 新手讀書會 – 4
  • [指南] 前端開發用的 CORS Anywhere via Cloudflare Workers
  • [筆記] Ultimate AWS Certified Developer Associate (69)
  • [指南] Heroku 免費 Dyno 取消後的去處 – Fly.io, Render 和 Supabase
  • [筆記] 六角學院 2022 React 新手讀書會 – 3
  • [筆記] Ultimate AWS Certified Developer Associate (63)
  • [筆記] 六角學院 2022 React 新手讀書會 – 2
  • [筆記] Ultimate AWS Certified Developer Associate (62)
  • [筆記] Vue3 Element Plus 前端分頁、排序和搜尋邏輯
  • [筆記] Ultimate AWS Certified Developer Associate (61)
  • [筆記] Ultimate AWS Certified Developer Associate (59)
  • [筆記] 六角學院 2022 React 新手讀書會 – 1
  • [筆記] Ultimate AWS Certified Developer Associate (58)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (72)
  • [筆記] Ultimate AWS Certified Developer Associate (57)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (71)
  • [筆記] Ultimate AWS Certified Developer Associate (56)
  • [筆記] Ultimate AWS Certified Developer Associate (55)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (70)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (69)
  • [筆記] Ultimate AWS Certified Developer Associate (54)
  • [筆記] Ultimate AWS Certified Developer Associate (53)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (68)
  • [指南] Buefy 搭配 Autocomplete 的思考邏輯
  • [筆記] Ultimate AWS Certified Developer Associate (52)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (67)
  • [筆記] Ultimate AWS Certified Developer Associate (51)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (66)
  • [筆記] Ultimate AWS Certified Developer Associate (50)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (65)
  • [指南] Element UI Pagination 同步思路和避免錯誤
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (64)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (63)
  • [筆記] Ultimate AWS Certified Developer Associate (48)
  • [筆記] Ultimate AWS Certified Developer Associate (47)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (62)
  • [指南] Vue 動態路由後續加載的兩種處理方式
  • [筆記] Ultimate AWS Certified Developer Associate (46)
  • [指南] 從 Vuex 改用 Pinia 的思路轉換記錄
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (61)
  • [指南] Element UI 搭配 i18N form 表單錯誤訊息不會自動切換語言的解決方法
  • [筆記] Ultimate AWS Certified Developer Associate (45)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (60)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (59)
  • [筆記] Ultimate AWS Certified Developer Associate (44)
  • [筆記] Ultimate AWS Certified Developer Associate (43)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (58)
  • [指南] Auth0 SPA Vue2 串接精簡指南
  • [筆記] Ultimate AWS Certified Developer Associate (42)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (57)
  • [筆記] Ultimate AWS Certified Developer Associate (41)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (56)
  • [筆記] Ultimate AWS Certified Developer Associate (40)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (55)
  • [筆記] Ultimate AWS Certified Developer Associate (39)
  • [筆記] Ultimate AWS Certified Developer Associate (38)
  • [筆記] Udemy – CSS3 Animations, Transforms and Transitions Ultimate Guide (54)
  • [指南] Vue Proxy Server 搭配 POST 的正確使用方式
  • [筆記] Ultimate AWS Certified Developer Associate (37)
  • 按讚加入粉絲團

    延伸閱讀