網頁中英文字型最佳化 | 網頁設計

6.2.17

網頁中英文字型最佳化
之前介紹過 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前)儷黑 ProLiHei 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(超鬆)
必須項目
預設值
所有特性皆可設定為 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, pc1.0+3.0+1.0+1.0+3.5+
ch27.0+3.0+9.0+7.0+20.0+
rem4.0+9.0+3.6+4.1+11.6+
vh, vw20.0+9.0+19.0+6.0+20.0+
vmin20.0+9.0*+19.0+6.0+20.0+
vmax26.0+不支援19.0+7.0+20.0+
Internet Explorer 9 支援 vm(vmin)

em VS rem

而 RWD(Responsive Web Design)最好使用 emrem,而它們的分別在於 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 或以上

pxrem備註
1px0.0625rem避免使用
2px0.125rem避免使用
3px0.1875rem避免使用
4px0.25rem避免使用
5px0.3125rem避免使用
6px0.375rem避免使用
7px0.4375rem避免使用
8px0.5rem避免使用
9px0.5625rem避免使用
10px0.625rem避免使用
11px0.6875rem避免使用
12px0.75rem可使用
13px0.8125rem可使用
14px0.875rem避免使用
15px0.9375rem可使用
16px1rem (base)可使用
17px1.063rem可使用
18px1.125rem可使用
19px1.188rem可使用
20px1.25rem避免使用
21px或以上1.313rem或以上可使用

結語

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

參考:

您或許喜歡

0 意見

精選文章

釋放C Drive空間:更改iTunes備份位置 | 電腦技巧

最近電腦常警告我儲存空間不足!自問沒有安裝新程式,文件又全都儲存在 D Drive,到底容量都去哪了?終於發現因妹妹備份iPhone的緣故。於是找了解決方法,希望幫到遇上同樣問的的朋友。

Facebook