字體系列
- serif
- 字體成比例笛求，有上下短線
Paste_Image.png
- sans-serif
- 字體成比例勇吊，沒有上下短線
Paste_Image.png
- monospace
- 字體寬度相同
Paste_Image.png
- cursive
- 模仿人的手寫
Paste_Image.png
- fantasy
- 無法歸類于之前四種字體的字體
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;
}
按先后順序指定多個字體拼岳，按先后查找字體用于顯示
字體名稱中含有特殊字符或者空格需要添加引號，否則會忽略該字體
字體名稱只有一個詞且與font-family的其他關(guān)鍵字不沖突窘游，就不用加引號
font-weight
- normal: 普通寬度字體
- bold: 粗體字體
- bolder: 相對于父類font-weight更粗一號
- lighter: 現(xiàn)對于父類font-weight更細(xì)一號
- 100-900: 粗度分級唠椭，按理說是沒個級別對應(yīng)一種粗度字體，但是一個字體系列不會完善九種不同粗細(xì)的字體忍饰，所以會采用最近粗度或細(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: 相對于父類font-size乘以縮小因子贪嫂， 縮小因子小于1
- larger: 相對于父類font-size乘以放大因子， 放大因子大于1
- 百分?jǐn)?shù): 相對于父類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: 傾斜字體，是一種單獨的字體風(fēng)格
- oblique: 傾斜字體赢织，是正常字體的一個傾斜版本
- 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)在值的最后亮靴，否者將被忽略
前三個可以不指定，默認(rèn)為normal
添加line-height時必須在font-size之后使用/鏈接于置，不能分開
- 使用系統(tǒng)字體關(guān)鍵字
- caption: 用于標(biāo)題的控件
- icon: 用于圖標(biāo)
- menu: 用于菜單
- message-box: 用于對話框
- small-caption: 用于小控件加標(biāo)簽
- status-bar: 用于窗口狀態(tài)
Paste_Image.png
具體因系統(tǒng)使用情況而定
字體匹配
CSS允許字體系列茧吊、加粗、變形, 所有這些都是通過字體匹配完成的
字體下載
@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';
}
