字體系列
- serif
- 字體成比例，有上下短線
Paste_Image.png
- sans-serif
- 字體成比例，沒有上下短線
Paste_Image.png
- monospace
- 字體寬度相同
Paste_Image.png
- cursive
- 模仿人的手寫
Paste_Image.png
- fantasy
- 無(wú)法歸類于之前四種字體的字體
Paste_Image.png
使用通用字體
font-family
body{
font-family: sans-serif;
}
指定使用通用字體系列 sans-serif，而不用管使用是系列里具體那種字體，font-family可繼承
body{
font-family: Times;
}
指定字體系列，這里指定的是serif字體系列中的Times字體
body{
font-family: Times, TimesNR, "microsoft yahei", serif;
}
按先后順序指定多個(gè)字體，按先后查找字體用于顯示
字體名稱中含有特殊字符或者空格需要添加引號(hào)，否則會(huì)忽略該字體
字體名稱只有一個(gè)詞且與font-family的其他關(guān)鍵字不沖突，就不用加引號(hào)
font-weight
- normal: 普通寬度字體
- bold: 粗體字體
- bolder: 相對(duì)于父類font-weight更粗一號(hào)
- lighter: 現(xiàn)對(duì)于父類font-weight更細(xì)一號(hào)
- 100-900: 粗度分級(jí)，按理說(shuō)是沒個(gè)級(jí)別對(duì)應(yīng)一種粗度字體，但是一個(gè)字體系列不會(huì)完善九種不同粗細(xì)的字體，所以會(huì)采用最近粗度或細(xì)度的字體
- inherit: 繼承父類的font-weight
body{
font-weight：bold;
}
font-size
- xx-small, x-small, small, medium, large, x-large, xx-large: 根據(jù)默認(rèn)大小medium乘以縮放因子決定
- smaller: 相對(duì)于父類font-size乘以縮小因子， 縮小因子小于1
- larger: 相對(duì)于父類font-size乘以放大因子， 放大因子大于1
- 百分?jǐn)?shù): 相對(duì)于父類font-size乘以百分?jǐn)?shù)，雷同于em單位
p{
font-size: 160%;
}
p{
font-size: 1.6em;
}
- 數(shù)值: 按照數(shù)值的單位設(shè)定字體大小， 現(xiàn)在一般使用px進(jìn)行設(shè)置
- inherit
font-style
- italic: 傾斜字體，是一種單獨(dú)的字體風(fēng)格
- oblique: 傾斜字體，是正常字體的一個(gè)傾斜版本
- normal: 豎直字體
- inherit
font-variant
- normal
Paste_Image.png
- small-caps
Paste_Image.png
- inherit
font
- font-style font-variant font-weight font-size(/line-height) font-family 組合
p{
font: bold small-caps 20px/24px Times, serif;
}
Paste_Image.png
組合中必須存在font-size與font-family并且挨著出現(xiàn)在值的最后，否者將被忽略
前三個(gè)可以不指定，默認(rèn)為normal
添加line-height時(shí)必須在font-size之后使用/鏈接，不能分開
- 使用系統(tǒng)字體關(guān)鍵字
- caption: 用于標(biāo)題的控件
- icon: 用于圖標(biāo)
- menu: 用于菜單
- message-box: 用于對(duì)話框
- small-caption: 用于小控件加標(biāo)簽
- status-bar: 用于窗口狀態(tài)
Paste_Image.png
具體因系統(tǒng)使用情況而定
字體匹配
CSS允許字體系列、加粗、變形, 所有這些都是通過(guò)字體匹配完成的
字體下載
@font-face {
font-family: 'fontNameRegular';
src: url('fontName.eot');
src: local('fontName Regular'), local('fontName'), url('fontName.woff') format('woff'), url('fontName.ttf') format('truetype'), url('fontName.svg#fontName') format('svg');
}
/*使用*/
body{
font-family: 'fontNameRegular';
}
