字体系列
- 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的其他关键字不冲突，就不用加引号
font-weight
- normal: 普通宽度字体
- bold: 粗体字体
- bolder: 相对于父类font-weight更粗一号
- lighter: 现对于父类font-weight更细一号
- 100-900: 粗度分级，按理说是没个级别对应一种粗度字体，但是一个字体系列不会完善九种不同粗细的字体，所以会采用最近粗度或细度的字体
- inherit: 继承父类的font-weight
body{
font-weight：bold;
}
font-size
- xx-small, x-small, small, medium, large, x-large, xx-large: 根据默认大小medium乘以缩放因子决定
- smaller: 相对于父类font-size乘以缩小因子， 缩小因子小于1
- larger: 相对于父类font-size乘以放大因子， 放大因子大于1
- 百分数: 相对于父类font-size乘以百分数，雷同于em单位
p{
font-size: 160%;
}
p{
font-size: 1.6em;
}
- 数值: 按照数值的单位设定字体大小， 现在一般使用px进行设置
- inherit
font-style
- italic: 倾斜字体，是一种单独的字体风格
- 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并且挨着出现在值的最后，否者将被忽略
前三个可以不指定，默认为normal
添加line-height时必须在font-size之后使用/链接，不能分开
- 使用系统字体关键字
- caption: 用于标题的控件
- icon: 用于图标
- menu: 用于菜单
- message-box: 用于对话框
- small-caption: 用于小控件加标签
- status-bar: 用于窗口状态
Paste_Image.png
具体因系统使用情况而定
字体匹配
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';
}
