iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 24
0
Modern Web

CSS大全閱讀筆記系列 第 24

第五章:字型(6)

  • 分享至 

  • xImage
  •  

(接上篇的字型大小部分)


  1. 字型大小:
    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-adjustfont-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的繼承行為,是繼承計算後的數值,而非百分比之類的單位。
    - 以上單位中,相對大小值(largersmaller)、長度單位em、百分比會根據親代元素決定字型大小。
    - 根據親代元素決定大小的計算方式,很可能會因為巢狀結構中的繼承問題,導致縮放失控的狀態,假設四層的巢狀結構,第二到四層都設定font-size: 80%,最後第四層的縮放比例會是40.96%,而非80%,所以如果要使用長度單位來設定字型大小時,rem會比em更好些,因為rem根據根元素決定大小,不會出現這種情況。
    - 在最終顯示時會四捨五入。
    - 使用字型尺寸關鍵字時,在某些瀏覽器上會出現狀況,且等寬字體時尤為明顯,當HTML為<p>...<span>...</span>...</p>,CSS為p{font-size: medium;} span{font-family: monospace; font-size: 2em;},如果依照預設,font-size: medium;會回報font-size為16px,根據繼承規則,<span>應該是32px,但在有些瀏覽器會回報26px,這是因為在這些瀏覽器繼承到子代<span>時是繼承關鍵字medium,而根據使用者代理,等寬字的預設大小為13px,所以會造成這種結果。這種情況的處理方式,就是在<span>的CSS中改寫成span{font-family: monospace, serif; font-size: 2em;},加上serif,可以解決這個問題,因為這會讓所有瀏覽器將font-size: 2em視為<p>當中font-size計算值得200%,而非medium對應的數值,所以可以解決這個Bug。

上一篇
第五章:字型(5)
下一篇
第五章:字型(7)
系列文
CSS大全閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言