font-family屬性值(字體系)該如何寫才好?

  1. 西文字體和中文字體的順序是怎樣的?哪個在前,哪個在後?

  2. 考慮到 Windows、Mac OS X、Linux、Unix 相應的字體,如:

    font-family:Arial,MS Yahei,MS heiti,STHeiti,WenQuan Yi MicroHei,sans-serif; 是否合理(請大神告知 Mac OS X、Linux、Unix 中西文默認字體都是哪些?)
  3. 聽說 Firefox 不支持別名,只支持 Unicode ,是否意味著我們寫 font-family 屬性時,必須都用 Unicode 碼呢?

  4. 諸如font-family:「宋體」 這樣的中文字體寫法在前端一般不提倡,是為什麼呢?若考慮到Firefox不識別字體別名,這種是不是兼容性最好且前端工程師最便於維護的寫法呢?

  5. font-family設置中文字體(如宋體),是否同時可以渲染簡體中文和繁體中文?

  6. 謝謝!


  1. 西文在前。中文字體一般都包含常用西文字元的字形,放在前面的話西文字體就起不到效果了。
  2. 不合理。一般原則是西文在前中文在後,小眾平台在前大眾平台在後。比如 OS X 下安裝了 Office 的話就會有微軟家的字體,而讓微軟雅黑出現中文字體的首位就顯得不妥。反過來的情況會比較少見。而你寫的 MS Yahei 和 MS heiti 都不存在。平台默認字體可參考:OS X Lion 的系統默認字體是什麼? Linux 不同發行版的默認字體就不好說了。
  3. 不記得有這個說法,用 Unicode 編碼寫字體名字應該主要是為了防止 CSS 文件編碼設置不正確導致的問題。
  4. 見 3。你說的「字體別名」我不太清楚是指什麼,不過建議你參考 對於 CSS 的「font-family」,瀏覽器是通過字體的哪個名稱進行匹配的? 下面的回答。CSS 2.1 規範沒有明確定義 font-family 名字匹配的具體規則,所以可能不同瀏覽器下會有些差異。一般來講字體的中英文 Family 名都可匹配,但對於定義了 Preferred Family 的字體來說可能有些不同,可以參考 字體漫談 這裡的我之前做的一個測試(對最新版本的瀏覽器可能已經不準確)。
  5. 某個字體能否顯示某個字元取決於字體中是否包含了該字元對應的字形(glyph)。是否能顯示繁體字就看你設的字體是否包含繁體字的字形了。

僅回答第一個問題:

西文字體和中文字體的順序是怎樣的?哪個在前,哪個在後?

如果你希望中西混排的文字中,西文字體優先顯示英文字體風格,而不是中文字體中包含的西文字體,就將西文字體放在前面。效果如下:

a simple live demo:

http://jsfiddle.net/HGgY4/第二個問題,可參考:如何保證網頁的字體在各平台都盡量顯示為最高質量的黑體?


$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Simsun", "Courier New", monospace !default;

上面是我自己的 SCSS 的字體變數,LESS 語法類似(將 $ 換成 @)

  • font-family-sans-serif 是無襯線字體集,無襯線字體最典型的就是世界經典字體 Helvetica 和黑體(微軟雅黑、萍方等),顧名思義沒有襯線;
  • font-family-monospace 是等寬字體,最典型的是 Consolas 控制台字體,當然還有大名鼎鼎的 Curier New 和宋體。

關於大家關心的順序問題:

  • 最前面的通常是操作系統特有的英文字體,例如蘋果的 apple-system、微軟的 Segoe UI 等。
  • 接下來是操作系統特有的中文字體,如蘋果的萍方、微軟雅黑等。
  • 最後是 fallback 用的安全字體,例如無襯線字體是 sans-serif 或者 Arial,而等款字體則是 Courier New 或者 monospace。

推薦閱讀:

有哪些值得推薦的俄文字體?
一般雜誌正文的字體選擇?
造字工房字體產品維權行動能否改變中國當今字體設計行業的現狀?
電影《American Psycho》攀比名片一段中,各人對字體和紙張的選擇到底品位如何?
法語中,薩特的「他人即地獄」的法語原文是什麼?怎麼寫?

TAG:前端開發 | 字體 | HTML | CSS |