字体

字体系列

• 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';
 }