CSS手冊簡編:字型屬性

來源:互聯網
上載者:User
css

CSS屬性:

5、字型(Font)屬性:

這裡定義了關於字型的各種屬性。

font-family屬性定義字型的名稱,可以是一個字型的名稱,也可以是一類字型的名稱,字型的名稱一定要和電腦系統裡的完全一樣:

屬性名稱: 'font-family'
屬性值: [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>]
初始值: 根據使用者定義而定
適合對象: 所有元素
是否繼承: yes
百分比備忘: 被禁止

有些電腦系統裡如果沒有樣式單要求的字型,可以再設一個次字型以備萬一。例如:

BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }

family-name是指確定的某字型,如Heisi Mincho W3,generic-family指某一類字型,如serif。

font-style屬性描述字型的傾斜程度:

屬性名稱: 'font-style'
屬性值: normal | italic | oblique
初始值: normal
適合對象: 所有元素
是否繼承: yes
百分比備忘: 被禁止

font-variant屬性:

屬性名稱: 'font-variant'
屬性值: normal | small-caps
初始值: normal
適合對象: 所有元素
是否繼承: yes
百分比備忘: 被禁止

一個使用了small-caps屬性的元素中的小寫字母看起來要比正常的大寫字母小一些。

font-weight屬性用來描述字重。

屬性名稱: 'font-weight'
屬性值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
初始值: normal
適合對象: 所有元素
是否繼承: yes
百分比備忘: 被禁止

100到900代表9種不同的字重,400代表normal,700代表bold,900是最重的字型,bolder或lighter表示字型的字重比父元素高或低一級,比如父元素字重為400,則bolder代表字重500,如果父元素本身字重為900,那麼bolder後,字重還是900,同樣的lighter也一樣。有些字型並沒有100到900那麼全的字重,也許是從300到700,那麼字重的最小和最大值也為300到700。例如:

P { font-weight: normal } /* 400 */
H1 { font-weight: 700 } /* bold */

font-size屬性描述字型的大小:

屬性名稱: 'font-size'
屬性值: <absolute-size> | <relative-size> | <length> | <percentage>
初始值: medium
適合對象: 所有元素
是否繼承: yes
百分比備忘: relative to parent element's font size

該屬性可以使用絕對大小,也可以使用相對大小,其中絕對大小可以使用,如下關鍵字表示:

xx-small | x-small | small | medium | large | x-large | xx-large 分別代表最小、較小、小、中等、大、較大和最大。相對大小可以使用:larger 或smaller描述。例如:

P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }

Font屬性是以上屬性的捷徑,屬性如下:

屬性名稱: 'font'
屬性值: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]
適合對象: 所有元素
是否繼承: yes
百分比備忘: 只在font-size使用

例如:

P { font: 12pt/14pt sans-serif } P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }



相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.