CSS字型樣式.

Presentation on theme: "CSS字型樣式."— Presentation transcript:

1 CSS字型樣式

2 Fonts font-family h1 {font-family: "Times New Roman", sans-serif;}
font-size p {font-size: 2.5em;} font-weight .vip {font-weight: bolder;} font-style .var {font-style: italic} font-variant #subtitle {font-variant: small-caps;} font p {font: italic bold 28px/36px "Times New Roman", serif;}

3 font-family 屬性值: 一或多個字型名稱 若多個字型名稱，以逗號分隔 字型名稱若內含空白，以引號括住
h1 {font-family: "Lucida Calligraphy", Verdana, serif;} h2, h3 {font-family: sans-serif;} p#asp {font-family: "Monotype Corsiva", Arial;} p {font-family: "Bauhaus 93";}

4 通用字型(Generic font families)
名稱 意義 範例 serif 襯線字                               sans-serif 無襯線字                                            cursive 捲曲字體                                       fantasy 花俏字體                                     monospace 等寬字體                                                serif vs sans serif:

5 字型大小(font-size) 屬性值: xx-small, x-small, small, medium, large, x-large, xx-large smaller, larger length %

6 字型粗細(font-weight) bold (厚)、bolder (更厚)、及 normal (正常)
設定數值可以從 100(最細) 到 900 (最粗的) <span style="font-weight: bold">bold</span> <span style="font-weight: 900">900</span> = normal = bold

7 字型格式(font-style) 用來設定字體是否為斜體字 (italic 或 oblique)
<span style="font-style: normal">normal</span> <span style="font-style: italic">italic</span> <span style="font-style: oblique">oblique</span>

8 字型變形(font-variant) <span style="font-variant: small-caps">initial in small caps</span> AND LATER IN LARGE CAPS.

9 font font: font-style font-variant font-weight font-size/line-height font-family; h1 {font: 1.75em sans-serif;} h2 {font: 28px serif;} h3 {font: bold 1.75em sans-serif;} h4 {font: oblique bold small-caps 1.75em Verdana, sans-serif;} p {font: italic 28px/32px Georgia, Times, serif;}