2015年2月3日 星期二

2015.02.03 CSS學習(Fonts)

網頁上的文字可以透過CSS來控制


如何更改網頁字型?
使用font-family
font-family所設定的第一個字型稱為The ideal font,之後的字型都稱為Fallback fonts
網頁預設會先選取ideal font,當使用者電腦中沒有那個字型時才會選取fallback font
例:
body{
    font-family: Arial, "Times New Roman";
}
body套用Arial字型(如果電腦中沒有Arial的字型則改套用Times New Roman),
注意,如果字型名稱不只一個單字,那字型名稱就要用雙引號" "括起來

font-size設定的是字型大小
例:
body{
    font-size: 14px;
}
body的字型大小設為14px
px代表的是單位Pixels(像素),電腦顯示的基本單位就是pixel,所以一般網頁設計都使用px作為字型大小的單位
px並不是唯一的單位選擇
其他的單位:
percentages % 百分比
ems,不是任何專有名詞的縮寫,而是指一個大寫字母「M」所占有的寬度
詳細的em介紹請參考此篇文章:網頁設計該用哪種字級單位:px、em或rem?

font-weight設定的是文字的粗細
可設定的值:normal(正常)、lighter(細一點)、bold(粗體)、bolder(比粗體更粗),或是使用數字100,200...900


font-style設定的是文字是否為斜體字
可設定的值:italic(斜體)、oblique(傾斜)、normal(正常)


text-transform 設定英文字母的大小寫
可設定的值:uppercase(全部大寫)、lowercase(全部小寫)、capitalize(每個單字的第一個字母大寫)


line-height行高,每一行之間的距離


跟box model一樣,瀏覽器也有預設的字型樣式與大小
如果不想要套用預設的字型樣式,一樣將整個網頁用到的tag一一列出來
html, body, h1, h2, h3, p, ol, li, a {
    font-size: 100%;
    font: inherit;
}