CSS Styling - Font
CSS Font 的properties用來定義字的字型、粗細與字的style(例如:斜體)等
CSS Font Families
通常有兩種Font Families的type
- generic family - 一群字體看起來類似的font families (ex: "Serif" or "Monospace" )
- font family - 一個特定的font family (ex: "Times New Roman" or "Arial" )
| Generic family | Font family | Description |
|---|---|---|
| Serif | Times New Roman Georgia | Serif fonts 在某些字的尾端有 small lines |
| Sans-serif | Arial Verdana | "Sans" 意思是就是"沒有" - 與上面對比,在字體的尾端都不會有small line! |
| Monospace | Courier New Lucida Console | 所有的monospace字元都有相同的寬度 |
Font Family
一段text的font family就是被font family的property所設定的
font-family property應該會有幾個叫做"fallback"的字型,
當瀏覽器不支援第一個字型的時候,瀏覽器會試試看下一個字型有沒有支援
開頭用自己想要的字型,結尾用generic family,如果都不支援,讓瀏覽器可以在generic family內選一個相似的字型
*注意 : 若那個字體的名稱超過一個英文單字,必須用雙引號包起來
- 範例
- p{font-family:"Times New Roman", Times, serif;}
- font family間必須用逗號隔開
- 原W3School的Demo
- 通常是font-family的第一個,若電腦無此字體則用下一個代替!
- font-style 這個property通常是拿來讓字體變成斜體
- font-style有三個value
- normal - 正常
- italic - 斜體
- oblique - 傾斜(類似斜體但較少支援)
- 範例
- p.normal {font-style:normal;}
- p.italic {font-style:italic;}
- p.oblique {font-style:oblique;}
- 將p這個HTML元素定義class
- 原W3School的Demo
- font-size property 設定字體的大小
- font-size可以是一個絕對的數值或是相對的大小
- 設定文字在一個指定的大小
- 不允許使用者改字體大小,不管是什麼瀏覽器
- 當實際出的size知道時,絕對的數值是很好用的
- 相對於周遭的元素去設定大小
- 允許使用者改字體大小,在所有的瀏覽器都可
- 若無指定大小,對於正常的文字字體大小預設16px
- 16px = 1em
用pixels設定字體大小
- 範例
- h1 {font-size:40px;}
- h2 {font-size:30px;}
- p {font-size:14px;}
- 原W3School的Demo
- h1 {font-size:2.5em;} /* 40px/16=2.5em */
- h2 {font-size:1.875em;} /* 30px/16=1.875em */
- p {font-size:0.875em;} /* 14px/16=0.875em */
- 範例
- body {font-size:100%;}
- h1 {font-size:2.5em;}
- h2 {font-size:1.875em;}
- p {font-size:0.875em;}
- 原W3School的Demo
- 若將 body {font-size:100%;} 改成 body {font-size:50%;},則全部都會縮小一半!
留言
張貼留言