iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 19
0
Modern Web

CSS大全閱讀筆記系列 第 19

第五章:字型(1)

  • 分享至 

  • xImage
  •  
  1. 使用字型:
    a. 利用font-family屬性來使用任何可用的字型,會套用到指定元素,再透過繼承機制套用到指定元素的所有子代與後裔元素,除非有其他宣告覆寫字體設定。
    b. 通用字型:
    - CSS定義了五種通用字型,如果不在意使用的字型,可直接指定使用,不過通常都用作指定字型無法使用的備案,放在font-family的最尾端,作為最後一道保險,就像p {font-family: ......, san-serif;}
    - 襯線體(serif font):有襯線的比例字體,比例字體是指每個字元會依字元形狀而有不同的寬度,襯線則是指每個筆畫開頭或結束時的裝飾,使用時寫成font-family: serif;,英文中Times、Georgia都是這類字體,中文裡的宋體、明體基本也屬於此類
    - 非襯線體(san-serif font):無襯線的比例字體,使用時寫成font-family: san-serif;,英文中常用的像是Helvetica、Verdana、Arial,中文的黑體、圓體都是屬於非襯線體
    - 等寬字型(Monospace font):非比例字體,每個字元都佔有相同寬度,包含了襯線體與非襯線體,使用時寫成font-family: monospace;,中文字元一般屬於等寬字體,但中英混用時,英文字元不一定是等寬字體。
    - 草書字體(Cursive font):這類字體通常包含大量的曲線或比襯線體更多的裝飾筆畫,使用時寫成font-family: cursive;,英文中Comic Sans就是很代表性的草書,中文裡楷書也屬此類。
    - 花俏字型(Fantasy font):又稱裝飾字,基本上不屬於前四類的字型,都會被歸到此類,在瀏覽器中也會把無法明確歸類到前四項的字體,分屬到此類,使用時寫成font-family: san-serif;
    c. 指定字型:
    - 當有明確想使用的字體時,可以直接用font-family指定使用字體。
    - 當使用者端沒有網頁作者設定的指定字體,使用者代理就會顯示預設的使用者代理字型。
    - 為避免上述情況,可以在font-family中指定多個外型相似的字體,以半形逗號分隔,以降低此情況的發生。使用者代理會依照font-family中排列的順序選擇字體,忽略使用者端沒有的字體,直到找到使用者端可使用且網頁作者也指定的字型套用,因此可在最尾端加上通用字型關鍵字,作為最後一道保險,例如p {font-family: 'Helvetica Neue', Helvetica, Arial, san-serif;}
    d. 引號的使用:
    - 一般情況下,字體名稱不需要加任何引號。
    - 當字體包含空白、分隔線等特殊符號時,建議加引號,以免被使用者代理忽略,使用西式雙引號("......")或西式單引號('......')都可以。
    - 通用字體不可加引號,否則會被識別成同名的指定字體,而非通用字體。
    - <style>中使用font-family時,不能和屬性使用相同的引號,如果<style>中使用的是西式雙引號("......"),那font-family就必須使用西式單引號('......'),所以必須寫成<p style="font-family: 'Helvetica Neue', serif;">......</p>才正確,<p style="font-family: "Helvetica Neue", serif;">......</p>的寫法是錯誤的。

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

尚未有邦友留言

立即登入留言