第五章：字型（6）

第 11 屆 iThome 鐵人賽

DAY 24

Modern Web

CSS大全閱讀筆記系列第 24 篇

11th鐵人賽

Camellus

2019-10-10 23:35:09

1117 瀏覽

分享至

（接上篇的字型大小部分）

字型大小：
f. font-size的長度單位：
- 可以使用所有的長度單位（包括in、pc、cm、px等），其中px是最常用的單位。
- 不建議使用絕對長度單位，因為有些瀏覽器在字型縮放上會出現狀況，在行動裝置上尤其效果不佳。
- em是根據親代元素繼承的大小來決定，可以視作百分比來處理（1em=100%）。
- rem是根據根元素（也就是<html>）來決定字型大小。
- 寫法為font-size: 20px。
g. font-size-adjust屬性
- font-size-adjust是處理字型縱橫比的屬性，縱橫比是字型的x-height除以font-size後的結果，縱橫比低的字型會較快失去可讀性。
- font-size-adjust是為了使用非網頁作者首選字體時，使網頁仍具可讀性，不同字體在相同尺寸時的可讀性會差異很大（可讀性低的字體會較難閱讀）。
- 一般可以直接使用font-size-adjust: auto;直接設定，因為字體檔字一般會預設縱橫比，轉換字體時可以以此為基準，另外，也可用font-size-adjust: none;關閉所有對字型尺寸的調整。
- 如果字體檔沒有設定縱橫比，使用者代理會自行計算，但也可以給予數值，寫法為font-size-adjust: 0.58;，不加任何單位。
- font-size-adjust和font-size的換算方式為：宣告的font-size×(font-size-adjust值÷原設定字體的縱橫比)=調整後的font-size，其中font-size-adjust值一般就是變更後字體的縱橫比。例如原設定字體Times縱橫比為0.46且font-size: 10px;，變更後字體Verdana縱橫比為0.58，因此可以得知font-size-adjust: 0.58;，變更後的font-size經由計算可得10×(0.58÷0.46)=12.6，所以變更後font-size: 12.6px;。
h. 字體繼承的機制：
- font-size的繼承行為，是繼承計算後的數值，而非百分比之類的單位。
- 以上單位中，相對大小值（larger和smaller）、長度單位em、百分比會根據親代元素決定字型大小。
- 根據親代元素決定大小的計算方式，很可能會因為巢狀結構中的繼承問題，導致縮放失控的狀態，假設四層的巢狀結構，第二到四層都設定font-size: 80%，最後第四層的縮放比例會是40.96%，而非80%，所以如果要使用長度單位來設定字型大小時，rem會比em更好些，因為rem根據根元素決定大小，不會出現這種情況。
- 在最終顯示時會四捨五入。
- 使用字型尺寸關鍵字時，在某些瀏覽器上會出現狀況，且等寬字體時尤為明顯，當HTML為.........，CSS為p{font-size: medium;} span{font-family: monospace; font-size: 2em;}，如果依照預設，font-size: medium;會回報font-size為16px，根據繼承規則，應該是32px，但在有些瀏覽器會回報26px，這是因為在這些瀏覽器繼承到子代時是繼承關鍵字medium，而根據使用者代理，等寬字的預設大小為13px，所以會造成這種結果。這種情況的處理方式，就是在的CSS中改寫成span{font-family: monospace, serif; font-size: 2em;}，加上serif，可以解決這個問題，因為這會讓所有瀏覽器將font-size: 2em視為當中font-size計算值得200%，而非medium對應的數值，所以可以解決這個Bug。