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

章節連結

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

html logo


說明

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

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

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

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

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

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

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

通用設定參考


相關文章

  • [指南] 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
  • [筆記] Python3 Portable 免管理員權限版本
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 9
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 8
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 7
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 6
  • [指南] 用 Vue-SFC-Rollup 在 NPM 發佈你的第一個 Vue 套件
  • [指南] JSON Diff – 讓你快速判別兩個 JSON 檔間的差異
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 5
  • [筆記] Google / 百度 Baidu 中文地址轉換經緯度平台
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 4
  • [筆記] ECharts 客製化 Tooltip
  • [筆記] jQuery Bootstrap 藉由 CSS 開關調整 Dropdown 的方式
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 3
  • [筆記] jQuery DataTable 輸出 Excel 的設定調整初嘗試
  • [筆記] Vue3 / Vue-cli4 與 Vuex, TypeScript 和 Vue-i18N 的實作
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 2
  • [筆記] Vue3 / Vue-cli4 在 Composition API 中取得 Vue Instance
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 1
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 16
  • [筆記] WordHTML 將 Word 排版迅速轉換成 HTML 格式
  • [筆記] 將 Google Sheet 變身成 API Server ( 匯入 JSON 和輸出 JSON )
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 14
  • [筆記] Textgen 附有白話、文言文等選項的中文假字產生器
  • [指南] 整合 Vue-i18N 國際化 和 TypeScript 到現有的 Vue 2.X 專案
  • [指南] 前端開發 JSON-server 由多個 json 檔來快速模擬 Restful API
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 13
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 12
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 11
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 10
  • [指南] jQuery 浮動跳出框 ( Modal ) 的按鈕事件記得取消
  • [指南] 來訓練你對字距的感覺 前端設計 KernType
  • [筆記] TypeScript + D3.js + Vue 3 – 幫長條圖加上 Tooltip
  • [指南] 輕量化的 JavaScript i18N 多國語言套件
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 9
  • [筆記] jQuery 搭配 Async / Await 一同使用
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 8
  • [指南] Amazon Amplify 初探 – 佈署一個結合身分認證的 Vue.js 應用
  • [指南] npm 預設下載來源更改 – 因應中國的特殊規矩
  • [指南] 解決中國境內無法使用 raw.githubusercontent.com 下載套件的問題
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 7
  • [筆記] TypeScript + D3.js + Vue 3 – 幫長條圖加上基本的水平、垂直軸 ( x, y axis)
  • [筆記] Lodash 比較物件 Object 是否更動的一些細節
  • [筆記] TypeScript + D3.js + Vue 3 – 讓長條圖有 RWD 效果
  • [筆記] TypeScript + D3.js + Vue 3 – 初探 & 畫個長條圖
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 6
  • [指南] Vue TestCafe + TypeScript 導入 E2E 測試
  • [指南] Vue 結合 Jest + TypeScript 導入單元測試 – 2
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 5
  • [指南] Vue 結合 Jest + TypeScript 導入單元測試 – 1
  • 按讚加入粉絲團

    延伸閱讀