2012年9月27日 星期四

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:微軟正黑體,PMingLiU,MingLiU,sans-serif;

使用範例

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





簡體用戶原則上用 font-family:Microsoft YaHei,SimSun,sans-serif;

使用範例

<style type="text/css">
*{
font-family:Microsoft YaHei,SimSun,sans-serif;
}
</style>





2019年10月14日,更新說明

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

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






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

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

理解3、在 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

2 則留言:

  1. 好棒的教學, 謝謝!!

    回覆刪除
  2. 喜歡你的仔細教學,對我這個新手非常好用!!非常謝謝~

    回覆刪除

留言後,需等待,站長的審核,才會公開,請勿重複留言,謝謝