iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 23
0
Modern Web

CSS大全閱讀筆記系列 第 23

第五章:字型(5)

  • 分享至 

  • xImage
  •  
  1. 字型大小:
    a. font-size所定義的字型大小不是由字元大小決定的,而是以字型的em平方決定,所謂的em平方是指字型在沒有line-height等額外因素下,基準線間的距離(大致為該字型最高字元(如f)的頂端線到最低字型(如g)的底端線),所以字型中的大部分字元都會比em平方小。CSS中的font-size,作用是指定em平方的大小,而非字元大小
    b. font-size有幾種方式可以決定單位:
    - 絕對大小值:xx-smallx-smallsmallmediumlargex-largexx-large)。
    - 相對大小值:利用關鍵字largersmaller
    - 百分比數值。
    - 長度值:利用絕對長度單位。
    - 自動調整尺寸:利用font-size-adjust屬性。
    - 繼承親代元素設定。
    c. 絕對大小值:
    - 由小至大為xx-small<x-small<small<medium<large<x-large<xx-large,兩階之間的大小關係不變(例如large一定小於x-large),縮放比例會因為CSS的規範或使用者代理改變。
    - 寫法為font-size: xx-large沒有實際的數字單位
    d. 相對大小值:
    - 依據絕對大小值的大小關係(xx-small<x-small<small<medium<large<x-large<xx-large),以親代元素為基準,larger比親代元素大一階,smaller則小一階,實際尺寸則參照絕對大小值在當下使用者代理或CSS規範中定義的尺寸。
    - 沒有上線與下限,就算設定比xx-small再小(smaller)或是比xx-large再大(larger),依然會做出反應(比親代元素大或小),實際縮放尺寸依使用者代理決定。
    - 寫法為font-size: larger沒有實際的數字單位
    e. 百分比:
    - 依照親代元素繼承的尺寸再做計算,實際尺寸會是親代尺寸乘以百分比,會比相對大小值更精確的計算大小。
    - 寫法為font-size: 200%,意思是此元素的字型大小會是親代元素的兩倍(200%)。

(字型大小未完)


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

尚未有邦友留言

立即登入留言