網頁中英文字型最佳化

  1. 主頁
  2. 網站開發
  3. 網頁中英文字型最佳化

2017-02-06 4

網頁中英文字型最佳化

之前介紹過 Google Fonts 的「思源黑體」雲端字型，但畢竟會增加需讀取的資源。其實現今電腦系統內置的字型也很漂亮，除了新細明體還有其他選擇。

目錄

各系統的字型

首先來了解常見作業系統可選擇的中文字型：

作業系統 中文名稱 英文名稱
Windows XP/Vista/7/8/10 新細明體 PMingLiU
Windows XP/Vista/7/8/10 標楷體 DFKai-SB
Windows Vista/7/8/10 微軟正黑體 Microsoft JhengHei
Windows Vista/7/8/10（簡體） 微軟雅黑體 Microsoft YaHei
OS X（版本10.6前） 儷黑 Pro LiHei Pro
OS X / iOS 黑體-繁 Heiti TC
OS X / iOS 黑體-簡 Heiti SC
OS X 標楷體 BiauKai
Linux 文泉驛正黑 WenQuanYi Zen Hei
Linux 全字庫正楷體 TW-Kai
Android – Droid Sans
各作業系統內建的中文字型

字型 CSS

在 CSS 中，系統會依據排列次序而呈現，如果在系統中找到編碼，就不會使用後面的字型。因此應把罕見的字型放前，通用字型放後，即：

英文字型 → Linux 字型 → Mac 字型 → Windows 字型 → 通用字型

font-family: Helvetica, Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "黑體-繁", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", sans-serif;

注意：

  • 為了相容不同語系的電腦，需列出中文字型的中文及英文名稱
  • 除了單字英文字型名稱，加上雙引號可確保瀏覽器相容性。

Font Shorthand

使用簡寫，使代碼更簡潔，增加讀取效率。句法（Syntax）：

解說：

特性 功能及可能值
font-style 設定字體樣式：

 

  • normal（標準）＃
  • italic（斜體字）
  • oblique（傾斜字體）
font-variant 設定字體變化：

 

  • normal（標準）＃
  • small-caps（小型大寫字母）
font-weight 設定字體粗度：

 

  • normal（標準）＃
  • bold（粗體）
  • bolder（超粗體）
  • lighter（幼體）
  • 100/200/300/…/900（字型粗度：400 = normal；700 = bold）
font-size＊ 設定字體大小：

 

  • medium（中等）＃
  • xx-small（超小）
  • x-small（較小）
  • small（小）
  • large（大）
  • x-large（較大）
  • xx-large（超大）
  • …em/ex/ch/rem（相對長度）
    • em = parent element font-size in pixels（點數），預設 1em = 16px
    • ex = x-height of the element’s font（X字高），1ex ≈ 0.5em
    • ch = the width of the 0 (zero) glyph of the font
    • rem = root element
  • …vmax/vmin/vh/vw（Viewport 單位）
    • 1vmax = 1% of the maximum value of the viewport height and width
    • 1vmin = 1% of the minimum value of the viewport height and width
    • 1vh = 1% of viewport height
    • 1vw = 1% of viewport width
  • …cm/in/mm/pc/pt/px/q（絕對長度）
    • cm = centimeter（厘米），1cm = 10mm
    • in = inch（英吋），1in = 2.54cm
    • mm = millimeter（毫米）
    • pc = pica，1pc = 12pt
    • pt = point（點），1pt = 1/72in
    • px = pixel（像素）
    • q = A quarter of a millimeter，1q = 1/40cm
  • …%（依比例）
line-height 設定行高：

 

  • normal（標準）＃
  • 純數值，可為小數（字體大小的倍數）
  • …px/pt/cm 等【參考 font-size】
  • …%（依比例）
font-family＊ 設定字型
font-stretch 設定字型間距（暫未有主流瀏覽器支援）：

 

  • ultra-condensed（超緊密）
  • extra-condensed（較緊密）
  • condensed（緊密）
  • semi-condensed（微緊密）
  • normal（標準）＃
  • semi-expanded（微鬆）
  • expanded（鬆）
  • extra-expanded（較鬆）
  • ultra-expanded（超鬆）
備註
  1. ＊ 必須項目
  2. ＃ 預設值
  3. 所有特性皆可設定為 initial（使用預設值）或 inherit（使用母元素值）
解說

選擇字型大小

字型單位

根據 W3C 指引，推薦使用 em, px, % 為單位，如需列印則使用 em, cm, mm, in, pt, pc, %。

絕對長度的關係：1in = 2.54cm = 25.4mm = 72pt = 6pc。而要準確顯示長度，需要高解像度（約 200 pdi – 300 pdi）的螢幕，因此不建議網頁使用絕對長度。

瀏覽器支援

長度單位
em, ex, %, px, cm, mm, in, pt, pc 1.0+ 3.0+ 1.0+ 1.0+ 3.5+
ch 27.0+ 3.0+ 9.0+ 7.0+ 20.0+
rem 4.0+ 9.0+ 3.6+ 4.1+ 11.6+
vh, vw 20.0+ 9.0+ 19.0+ 6.0+ 20.0+
vmin 20.0+ 9.0＊+ 19.0+ 6.0+ 20.0+
vmax 26.0+ 不支援 19.0+ 7.0+ 20.0+
備註 ＊Internet Explorer 9 支援 vm（vmin）
瀏覽器支援

em VS rem

而 RWD（Responsive Web Design）最好使用 em 或 rem，而它們的分別在於 em 是根據使用的字體大小而改變，rem 則是根據瀏覽器的預設大小而改變。

何時使用 em？

em 是根據 font-size 而影響元素大小，適用於不受縮放影響的地方，如 padding, margin, line-height 等。

何時使用 rem？

rem 是根據訪客的偏好而影響元素大小，如果使用者把預設字體調大或調小，都不會發生截斷或壓扁的情況。因此 rem 適用於佈局，如 height, width, padding, margin, border, font-size, shadow 等。

建議中文字型大小

避免使用在繁體中文的 font-size 設定值: 1~7pt, 15pt, 1~11px, 14px, 20px，假設 1rem = 16px，即不要使用：
0.0625rem, 0.125rem, 0.1875rem, 0.25rem, 0.3125rem, 0.375rem, 0.4375rem, 0.5rem, 0.5625rem, 0.625rem, 0.6875rem, 0.875rem, 1.25rem（由 REM Calculator 轉換）

可使用：12px, 13px, 15~19px, 21px或以上，即 0.75rem, 0.8125rem, 0.9375rem, 1rem, 1.063rem, 1.125rem, 1.188rem, 1.313rem 或以上

px rem 備註
1px 0.0625rem 避免使用
2px 0.125rem 避免使用
3px 0.1875rem 避免使用
4px 0.25rem 避免使用
5px 0.3125rem 避免使用
6px 0.375rem 避免使用
7px 0.4375rem 避免使用
8px 0.5rem 避免使用
9px 0.5625rem 避免使用
10px 0.625rem 避免使用
11px 0.6875rem 避免使用
12px 0.75rem 可使用
13px 0.8125rem 可使用
14px 0.875rem 避免使用
15px 0.9375rem 可使用
16px 1rem (base) 可使用
17px 1.063rem 可使用
18px 1.125rem 可使用
19px 1.188rem 可使用
20px 1.25rem 避免使用
21px或以上 1.313rem或以上 可使用

結語

本文只是參考，實際設定還是要根據你的情況而定，你需要在瀏覽器測試是否達到你的理想效果。
如有意見或補充，歡迎在下面留言給我喔，謝謝！^^

參考：

、、
免費按讚支持創作

喜歡我的文章，請在下面按讚 5 下，助我得到 LikeCoin 獎賞，支持我繼續創作免費內容。

行有餘力，可以成為我的讚賞公民，每月送我一杯咖啡，從此每份贊助，都會化成實質支持。

作者簡介

香港斜槓族，喜歡學習的宅女。打工時期做過行銷、教育及IT行業。自學技能包括：網站開發、網路行銷、影片製作、平面設計等。

希望透過內在自我認知及外在技能培養的分享，幫助網路創業者實現理想生活，共建和諧美好的世界。

4 則評論

提交評論

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

本網站受 reCAPTCHA 保護，並適用 Google 隱私政策和服務條款。