font属性可用于font-style,font-family,font-weigth,font-variant,font-size,line-height这六个属性的简写，下面来分别说明。
1、font-style 文字倾斜
参数：oblique/normal/italic normal选择font-family的常规字体;oblique选择倾斜体;italic 选择斜体。
2、font-weight 文字加粗
参数：normal(400)/bold(700)/lighter(比从父元素继承来的值更细)/bolder(比从父元素继承来的值更粗)/number(一个介于 1 和 1000 (包含) 之间的 <number> 类型值).
3、font-size 文字大小
参数：20px(数字加单位)/关键字 可以使用关键字，像素或em数字值来定义字体大小。
关键字：small/medium/large...... 可用于定义网络字体大小。通过在body元素上定义关键字字体的大小，可以在网页的任何地方设置相对字体大小，有利于缩放整个网页的字体大小。
像素：需要精确的像素时使用此种方法。像素大小固定 ，但不同浏览器有可能显示效果有细微的差别。
组合方式：关键字+像素
em：em的大小是动态的，当定义或继承font-size属性时，1em等于这个元素的字体大小。如果在网页中没有设置文字大小那1em等于浏览器默认文字大小通常是16px.如果设置了body元素字体大小为20px,那1em=20px,2em=40px. 换算公式如下：
em=希望得到的像素大小/父元素字体像素大小
可以设置body元素的字体大小为62.5%（即默认大小16px的62.5%）等于10px。所以20px=2em,16px=1.6em.
rem:rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。rem和em都可用于响应式布局。
强调：网页应该使用偶数的字体，偶数字号相对更容易和 web 设计的其他部分构成比例关系。在css3中有一个-webkit-font-smoothing属性。这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。
4、font-family 文字字体
"主要字体","备选字体1","备选字体2"表示如果用户电脑上有"主要字体"就显示"主要字体"，如果没有就选择"备选字体1"，如果没有"备选字体1"，那就是"备选字体2"。
"英文字体","中文字体"；英文字符 使用英文字体，中文字符 使用中文字体；
5、font-variant 把段落设置为小型大写字母字体
这个的意思就是所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
参数：normal(浏览器显示一个标准字体) / small-caps(浏览器显示小型大写字母的字体) / inherit(从父元素继承font-variant属性的值)
6、line-height 行高
它代表了一行文字在容器中所占的高度，如果行高的值和容器的高度相等，那文字就会垂直居中。
参数：normal/数字/长度/百分比
测量多行文字行高的方法：
a. 首先要知道文字的大小 b.知道两行文字之间的距离 c.拿上边量出的距离/2 d.行高是上边距+文字高度+下边距
（如果b为奇数，文字上边距会少一像素，下边距会多一像素，如果行高为偶数那就刚好）
7、@font-face引入字体库
参数：font-family/scr
说明：@font-face 不仅可以放在在CSS的最顶层, 也可以放在 @规则 的 条件规则组中。它除了font-family&src属性外还有font-variant/font-stretch/font-weight/font-style等属性
font-family是一个字体变量，名称可以随意但是不要用关键字；src表示引入字体资源，如果引入内部资源需要用local(),引入外部资源则用url()，在用到url()时可以搭配用到format()在系统解析字体包之前判断字体包的格式的，缩短时间。
范例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font</title>
<style>
body{
font-size: 62.5%;
}
div{
border:1px solid red;
font-size: 1.5em;
font-style: oblique;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
line-height: 30px;
font-variant: small-caps;
}
</style>
</head>
<body>
<div>我的名字是davina</div>
</body>
</html>
@font-face {
font-family: 'example';
src: url('example.ttf') format('ttf');
}
