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

章節連結

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

html logo


說明

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

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

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

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

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

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

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

通用設定參考


相關文章

  • [筆記] Vue 按鈕 / 篩選資料架構
  • [指南] Windows 上使用免安裝 Node.js + Git Bash
  • [筆記] 2020 第二次前端工程師面試全記錄
  • [指南] Heroicons 開源免安裝 直接複製貼上的 SVG 圖示
  • [指南] Mac 上的快速架站好幫手 MAMP
  • [指南] 你真的需要 jQuery 嘛? jQuery 和 Vanilla JavaScript 轉換對照表
  • [指南] Vue.js 搭配 Docker 進行佈署
  • [筆記] 簡易型筆記本 Nute 瀏覽器輸入直接存成 TXT 檔
  • [筆記] Vue-Carousel 輕量化輪撥套件介紹
  • [指南] Embed Responsively 幫助 Google Maps, Youtube ….等加上自適應 RWD 效果
  • [指南] Chart.js 前端圖表實用工具
  • [筆記] 在 Vue 中正確引用 src/assets 裡的圖片
  • [筆記] 將 Vue 專案自動佈署到 Github Pages 上
  • [筆記] 網頁跨平台文字設定 Font-Family
  • [指南] Dynamic Dummy Image Generator 簡單好用的假圖生產器
  • [筆記] 使用 MySQL Workbench 操作 Heroku 上的 JawsDB MySQL
  • [指南] 特殊符號好難打?兩個網站讓你直接複製貼上
  • [指南] Responsively.app 前端工程師必備的 RWD 一個畫面全覽工具
  • [筆記] Vue 如何監控視窗寬度,並讓每個 component 可以取用
  • [指南] 在 Vue 專案中,修改 樣式方法
  • [筆記] Figma 前端 設計師協作工具簡單介紹
  • [筆記] 從 Vue CLI 3 開始建立規模化專案
  • [指南] Github 上的 Public APIs 列表
  • [指南] Iconmonstr 超過 4000 種的圖示 SVG, EPS, PSD, PNG 支援
  • [筆記] CSSgram – 輕鬆套用 Instagram 上的濾鏡效果
  • [筆記] Palettable 互動式的挑選配色工具
  • [筆記] Bootstrap 5 Alpha 版本上線囉 來看看新增些什麼
  • [筆記] Vuetify 客製化製作彈出 + 滾動選單
  • [筆記] Vuetify Expansion 客製標題按鈕
  • [筆記] 網頁切版直播班 2020 春季班 – 課後心得
  • [筆記] 如何客製化自己的 Bootstrap 設定檔
  • [筆記] 網頁切版直播班 2020 春季班 – 第八週
  • [筆記] 解決 VS Code Terminal 中無法正常顯示字體的問題
  • [筆記] HTML 與 PUG 線上格式轉換
  • [筆記] 網頁切版直播班 2020 春季班 – 第七週
  • [筆記] 使用 Gulp 進行網頁前端自動化 – 用一般 HTML 來製作樣板並排版
  • [筆記] 使用 Gulp 進行網頁前端自動化 – 依照開發環境調整佈署內容
  • [筆記] 使用 Gulp 進行網頁前端自動化 – 架設簡易伺服器和壓縮程式碼
  • [指南] 如何使用 Google 所提供的 Material Icon
  • [筆記] 使用 Gulp 進行網頁前端自動化 – Gulp 和 Bower 串接
  • [筆記] 網頁切版直播班 2020 春季班 – 第六週
  • [筆記] 使用 Gulp 進行網頁前端自動化 – PostCSS 自動加上前綴 & Load Plugins
  • [筆記] 網頁切版直播班 2020 春季班 – 第五週
  • [筆記] Carbon 程式碼使用 讓你的網頁程式碼顯示的更漂亮
  • [筆記] 使用 Gulp 進行網頁前端自動化 – 初始化你的第一個 Gulp 編譯專案
  • [筆記] 開始使用 Github Pages
  • [筆記] 使用 Gulp 進行網頁前端自動化 – 簡介
  • [筆記] 網頁切版直播班 2020 春季班 – 第四週
  • [筆記] 來訓練你的手指運動 – 英打練習 Typing Pratice
  • [筆記] Emmet 網路開發必備簡碼 加速你的開發流程
  • [筆記] 網頁切版直播班 2020 春季班 – 第三週
  • [筆記] 運用 Moment.js 製作 AM / PM 時間外掛
  • [筆記] HTML5 Input time 時間格式
  • [筆記] 網頁切版直播班 2020 春季班 – 第二週
  • [筆記] 網頁切版直播班 2020 春季班 – 第一週
  • [筆記] MarkMan 跨平台 設計稿標註與量測工具
  • [筆記] Sass 實戰全攻略 – 11 – 自製格線系統
  • [筆記] CodeSandbox 線上編輯器 模擬前端框架
  • [筆記] Sass 實戰全攻略 – 10 – 設計模式和規範
  • [筆記] 工字型樣板,長方形依照比例縮放
  • [筆記] Element-UI 的自定義表格邊框樣式
  • [筆記] Vue 關於 slot-scope 的簡易認知
  • [筆記] Chart.js 長條圖 最大值用特別顏色表示
  • [筆記] Sass 實戰全攻略 – 9 – 錯誤的 CSS 設計方式
  • [筆記] Vue Watch 監聽並延後發送請求
  • [筆記] Sass 實戰全攻略 – 8 – 關於命名的那些事兒
  • [筆記] Element UI Table 表格表頭縱向顯示
  • [筆記] Sass 實戰全攻略 – 7 – Sass/CSS 設計模式 (OOCSS)
  • [筆記] Sass 實戰全攻略 – 6 – Sass/CSS 設計模式 (Smacss)
  • [筆記] 自定義 Element UI 標題欄位遇上 Vue/no-unused error 的解決方法
  • [筆記] CSS 上常見的水平置中 & 垂直置中方法
  • [筆記] Sass 實戰全攻略 – 5 – mixin 解決響應式網頁的斷點問題
  • [筆記] Sass 實戰全攻略 – 4 – mixin 統整你常用的 CSS 方法
  • [筆記] Sass 實戰全攻略 – 3 – import 切分檔案和維護
  • [筆記] Vue2 Perfect-Scrollbar 置底開始
  • [筆記] Sass 實戰全攻略 – 2 – 變數的運用
  • [筆記] Body-Parser 無法解析的 FormData 解決方案 – multer
  • [筆記] Sass 實戰全攻略 – 1 – 簡介
  • [全端開發] 打造一個公開聊天室 Vue.js+MySQL+Socket.io+passport-jwt
  • [指南] 簡單製作自己的 Google 套件 (Extension)
  • [筆記] CSV 檔匯入 PostgreSQL 常見錯誤一覽
  • [筆記] 使用 PGAdmin 操作 Heroku 上的 PostgreSQL
  • [筆記] FlatIcon 免費非商業使用的向量圖示圖庫
  • [筆記] 2020 前端工程師面試全記錄
  • 工程師之路 Learning Programming
  • [指南] 線上 QR Code 產生器
  • [筆記] 台灣縣市二聯式選單 tw-city-selector.js
  • [筆記] Node.js 在 Windows 上的開發環境建置
  • [筆記] Heroku Sequelize 佈署細節
  • [筆記] HTML 表格 Table 的 tr td th 用法
  • [筆記] 運用 Heroku 佈署的初始化步驟
  • [筆記] 線上正規表示式測試器
  • [筆記] TinyURL 服務串接
  • 運用 Node.js 建網站的初始化步驟
  • [筆記] JavaScript 雙層選單篩選連動
  • [筆記] Heroku 佈署問題:如何將 Git 的子資料夾專案推上雲端?
  • [筆記] Google, Facebook, Github OAuth 認證設定申請
  • Mongo DB 條件操作符
  • Express Validator 操作介紹
  • 安裝 MongoDB 出現 SocketException: Address already in use 錯誤
  • 按讚加入粉絲團

    延伸閱讀

    GA瀏覽人氣:36