CSS font family 字型 字體 Updated 5 / 教你該如何設定 font-family 參數

css font family 字型 字體 使用 方式 教學 解說 簡介

css 的 font-family 字型,字體 這個參數設置...真的是一大學問，實在太複雜，這邊就以簡單為主做介紹

font-family 分兩種設置值，一種是通用字體集(generic-family)，另一種是字體名稱(family-name)

通用字體集(generic-family)，如
襯線字　 serif
無襯線字 sans-serif
捲曲字體 cursive
花俏字體 fantasy
等寬字體 monospace

通用字體集(generic-family)，應該是每個瀏覽器必備內建字體包，
可以看成，當family-name都找不到，就用generic-family內的字體包，
所以放在 font-family 參數最後面，一般都用 sans-serif

字體名稱(family-name)，如

下述為英數及符號部份
Arial
Tahoma
Helvetica
Comic Sans MS
Georgia
Time New Roman

下述為中文字部份
微軟雅黑體 Microsoft YaHei
微軟正黑體 Microsoft JhengHei
新細明體　 PMingLiU
細明體　　 MingLiU
標楷體　　 DFKai-sb
宋体　　　 SimSun

---

字體名稱(family-name)，內有空白時需加上引號(單引或雙引)

Microsoft YaHei、Microsoft JhengHei 中間有空白，使用時要加引號

後來測試，英文字中間有空白，前後不加單引或雙引號也是ok

---

中英文字體名稱都添加

該如何說，如果你只使用中文，如下
font-family: 細明體;

那麼英文及非中文語系，無法辨識，比較好是中英都添加
font-family: 細明體,MingLiU;

不過我有測試3種瀏覽器，其實只要用英文就可以了

---

依順序，由左至右查找

font-family: Arial,MingLiU,sans-serif;

這段意思是，先跑 Arial 但這只有英數符號，遇到中文字則跑 MingLiU 細明體，

如果前2者的字體包都沒有，則跑 sans-serif

如果有要求 英數及符號 和 中文字 不同字型時，則英數及符號放第1個，

中文放第2個...以此類推，例

英數及符號用 Georgia ，而中文字用 微軟正黑體 語法如下

font-family:Georgia,微軟正黑體,sans-serif;

---

字型及字體大小，顯示結果不同

常用的 12px 及 14px 及 16px 或更大字體，顯示上，多多少少，會有些差異

編寫時，最好用 IE Firefox Chrome 這3種瀏覽器分別檢視一下，選一種看起來順眼的

---

實在太複雜，我這裡列了一段，推薦用法

繁體用戶原則上用 font-family:微軟正黑體,"Microsoft JhengHei",MingLiU,sans-serif;

使用範例

<style type="text/css">
*{
font-family:微軟正黑體,"Microsoft JhengHei",MingLiU,sans-serif;
}
</style>

---

2019年10月14日，更新說明

Windows 10 傳統控制台，該如何打開，請參考 教您幾種，簡單的設置方式，就可以開啟傳統控制台

理解１、CSS 字型參數 font-family 是對應抓取 Windows 作業系統內 (字型) 資料夾，裡面的 (字體包)

理解２、現在 font-family 是設 微軟正黑體,Microsoft JhengHei,MingLiU 不是設 Microsoft JhengHei UI

要考慮到舊系統 Windows XP 7 8 8.1 如果設 Microsoft JhengHei UI 舊的系統，會抓不到

理解３、在 Windows 10 系統下，不管你是設 微軟正黑體 或 Microsoft JhengHei

瀏覽器，都會幫你指向 Microsoft JhengHei UI 字體包


相關教學 CSS 參數 font-family 字型，對 [按鈕] 內的數字、半角英字、中文字之影響，不對齊、偏上


相關教學 CSS 中的 * 星號，這個符號，原來不能亂用 / 如果要 (初始化) 參數，可以用別人的 reset 重置


相關教學 Blogger之blogspot 字型 字距 行距 調整設置說明 Updated 2


相關教學 Discuz X 設定字體之尺寸大小，設定字體之字型 微軟正黑體 / 微軟雅黑 Updated 2


返回目錄


對上述圖文教學，還不太明白的話，請至下方連結，查看 youtube 視頻解說

視頻解說之第一部分 https://www.youtube.com/watch?v=7kwiVPojXq4

謝謝大家，抽空觀看，files備份檔名 webscript01012