iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
0
Modern Web

CSS大全閱讀筆記系列 第 29

第五章:字型(11)

  • 分享至 

  • xImage
  •  
  1. 字型合成:
    a.當字型缺少粗體或斜體時,使用者代理可能會自行從現有字型計算出接近的字貌使用,但或許字貌會不太自然,font-synthesis可以控制控制這類字貌的運用與否與運用多寡,預設值為weight style,會作用於所有元素,可繼承親代元素的值。
    b. font-synthesis的設定值:
    - weight style:需要時使用者代理可自行計算出粗體和斜體使用。
    - weight:需要時使用者代理可自行計算出粗體使用。
    - style:需要時使用者代理可自行計算出斜體使用。
    - none:使用者代理不可自行計算出任何粗體或斜體使用。
    c. 使用font-synthesis時注意支援度,至今為止只有Firefox和Safari(桌機和手機版)支援。
  2. 字型屬性:
    a. fontfont-stylefont-variantfont-weightfont-stretchfont-sizeline-heightfont-family的縮寫,前面所列的屬性都可以寫成一個font的宣告,所以h1 {font-family: Verdana, san-serif; font-size: 30px; font-weight: 900; font-style: italic;}會等同於h1 {font: 900 italic 30px Verdana, san-serif;}
    b. font中設定的初始值會依照個縮寫屬性的初始值而定,且會繼承親代元素。其中比較特殊的是line-heightline-height設定單位基準是以元素本身的font-size計算,而非親代元素
    b. font宣告時的注意事項:
    -各設定值間以半形空白區隔。
    - 一定要設定font-sizefont-family,不可省略。
    - 除了font-sizefont-family之外,其他屬性設定值為normal時,可以省略。
    - font-stylefont-variantfont-weight必須在font-size之前。
    - font-variant只能指定normalsmall-caps(即CSS2.1中定義的值)。
    - font-stretch只能使用關鍵字,不可使用百分比。
    - line-height並非字型屬性,但仍可以在font中使用,使用時必須緊鄰font-size之後,並以半形斜線(/)分隔,寫作font-size/line-height,例如20px/3或是150%/2.5
    - font-family必須放在最尾端,是指定的最後一個值。
    - 符合前列數點的前提下,屬性順序可以隨意排列。
    - font屬性宣告時,會將所有包含在font內可設定的屬性值全部回歸為預設值,所以要更改其中幾項的設定值時,可以考慮使用單獨屬性,如font-weight: 900;
    - 在font縮寫時,IE和Edge不支援使用font-stretch,建議單獨寫。

(字型屬性未完)


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

尚未有邦友留言

立即登入留言