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

章節連結

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

html logo


說明

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

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

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

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

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

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

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

通用設定參考


相關文章

  • [筆記] Nuxt js 初探筆記 1 – 基礎環境建置
  • [筆記] Vuetify select autocomplete 套件限制多選數量
  • [筆記] 判斷瀏覽器為手機端還是 PC 端的方法
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 38 – 專案協作上的常見問題
  • [指南] 串接金流開發用 – 測試用信用卡產生器 Credit Card Generator
  • [指南] Emoji Finder 方便你於電腦中複製貼上 iOS 的表情符號
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 37 – 如何與工程師互動 2
  • [指南] Redirect Checker – 301, 302 以及更多的 http 狀態碼
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 36 – 如何與工程師互動
  • [指南] V-Calendar 限制時間選取範圍
  • [指南] Fast or Slow – 由 Wordfence 維護的網站測速工具
  • [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 在靜態網站中獲取資訊
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 35 – 原型設計的種類與技巧
  • [筆記] Google SpreadSheet API V4 改版 – 當作前端開發所需的 API 來源
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 34 – 設計標註檔
  • [筆記] Echarts 利用 visualMap 讓折線圖實現分段不同顏色
  • [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 利用 BeautifulSoup 來解析網頁原始碼
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 33 – 切圖命名與格式
  • [筆記] 善用 ECharts 中的 MarkArea 和 MarkLine 來製作出圖表上區域色塊
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 32 – 設計規範
  • [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 利用 Requests 模擬請求和攔截回應
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 31 – 深色模式
  • [筆記] Dayjs 解決時區、夏令時間 和 UTC 間的轉換問題
  • [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 從網頁溝通架構到爬蟲運作原理
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 30 – 頁面
  • [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – Python 的基本語法
  • [筆記] Vue-ECharts Tooltip 套用 RWD 避免破版的相關設定
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 29 – 改變頁面狀態來提升使用者體驗
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 28 – 響應式排版
  • [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 網頁爬蟲的起源和處理策略
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 27 – 高轉換的登陸頁
  • [筆記] 超新手也能用 Python 爬蟲打造貨比千家的比價網站 – 資料科學與網頁爬蟲
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 26 – 模板
  • [筆記] HiSKIO 圖解 AWS+GCP:雲端雙平台入門完全指南 – 20 – GCP 儲存類別和生命週期
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 25 – 運用常見的介面版型排出好設計
  • [筆記] HiSKIO 圖解 AWS+GCP:雲端雙平台入門完全指南 – 19 – GCP Cloud Storage 架構和版本控管
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 24 – 頁尾
  • [筆記] HiSKIO 圖解 AWS+GCP:雲端雙平台入門完全指南 – 18 – GCP Cloud Storage
  • [筆記] Vue-ECharts RWD 設定與封裝
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 23 – 頁首
  • [筆記] HiSKIO 圖解 AWS+GCP:雲端雙平台入門完全指南 – 17 – AWS EC2 vs GCP Compute Engine
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 22 – C.R.A.P. 四個幫助你優化介面的設計準則
  • [筆記] HiSKIO 圖解 AWS+GCP:雲端雙平台入門完全指南 – 16 – Machine Image
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 21 – Form 表單
  • [筆記] HiSKIO 圖解 AWS+GCP:雲端雙平台入門完全指南 – 15 – Persistent Disk 方案比較
  • [筆記] Vue-cli HTTP 431 Error 錯誤排查解決記錄
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 20 – DataTable 資料表
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 19 – Alert 警告訊息
  • [筆記] HiSKIO 圖解 AWS+GCP:雲端雙平台入門完全指南 – 14 – GCP Local SSD vs Persistent Disk
  • [指南] Vue-Router 的巢狀路由和 Empty View 妙用
  • [筆記] HiSKIO 圖解 AWS+GCP:雲端雙平台入門完全指南 – 13 – GCP Compute Engine
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 18 – Modal 互動視窗
  • [筆記] HiSKIO 圖解 AWS+GCP:雲端雙平台入門完全指南 – 12 – GCP Security Rules
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 17 – Card 卡片
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 16 – Tooltip 提示工具
  • [筆記] 初次開發 Google Chrome 套件時要注意的事項
  • [指南] 前端工程師開發必備的 Heroku + Node.js 佈署自己的 CORS 轉址伺服器
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 15 – 摺疊面板
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 14 – 導覽元件
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 13 – 通用設計
  • [指南] Vue3 搭配 vue-i18N 的全域注入設定
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 12 – 色彩
  • [筆記] 用 vuex-persistedstate 來保持你的 vuex 狀態
  • [指南] Dotnet 結合 Vue 的 MVC 專案規劃架構 – 佈署階段
  • [指南] Dotnet 結合 Vue 的 MVC 專案規劃架構 – 開發階段
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 11 – 文字
  • [筆記] 用 Python 批次轉換經緯度實作 – 注意事項
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 10 – 連結和圖示
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 9 – 單選按鈕和複選框
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 8 – Input 輸入格
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 7 – 物件狀態
  • [指南] JSON Formatter / Differ 驗證和比較你的 JSON 檔
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 6 – 按鈕
  • [指南] AbuseIPDB 查詢和回報可疑的 IP 位置資訊
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 5
  • [指南] Vue-Cli 發佈時輸出 Copyright 於 CSS 和 JS 檔內
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 4
  • [筆記] Bootstrap 5 新增自適應 RWD 的字體大小
  • [筆記] JavaScript 強迫終止瀏覽器的 Request 指令
  • [筆記] Google Chrome 實驗中的便利新功能 – 閱讀清單
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 3
  • [筆記] Bootstrap 5 Icons 無論你是否有用 Bootstrap 都可用
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 2
  • [筆記] JQuery 中的 .data() 方法妙用
  • [指南] IconDuck 免費圖示 ICON 集合下載站
  • [筆記] UI 設計入門:畫出有程式邏輯的設計稿 – 1
  • [筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 5
  • [筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 4
  • [筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 3
  • [筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 2
  • [筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 1
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 15
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 14
  • [指南] 用 Vue-SFC-Rollup 開發 Vue 2 版本套件
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 13
  • [指南] Kaspersky Mac 造成的 curl 連線失敗問題解決方式
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 12
  • [指南] 用 Python 批次轉換經緯度實作
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 11
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 10
  • 按讚加入粉絲團

    延伸閱讀