重新认识字体（一） （本人萌新第一次发文）

在定义字体的各个属性，可以让页面板式变得更好看。字体样式包括基础的字体类型、大小、颜色基本效果，另外还包括一些特殊的样式，如字体粗细、下划线、斜体、大小写样式等。

1.定义字体类型：font-family。

font-family 属性用于设置字体。可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
网页中常用的字体有宋体、微软雅黑、黑体等。通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。
再例如引入自定义的字体，比如我们所熟知的字体符号，[iconfont][1]，[Font Awesome][2]，[Material Icon][3]等。大家可以亲自去试一试。

2.定义字体大小：font-size

font-size 值可以是绝对或相对值。在浏览器中，一般的浏览器会给我们制定一下字体大小的基础值，16px。也就是说你不对字体大小做操作默认的字体大小就是16px。
绝对值：
    将文本设置为指定的大小
    不允许用户在所有浏览器中改变文本大小（不利于可用性）
    绝对大小在确定了输出的物理尺寸时很有用
相对大小：
    相对于周围的元素来设置大小
    允许用户在浏览器改变文本大小
我们的pt,in,cm,mm,pc等固定单位就是一般常见的绝对值，而像px,%，em,rem,vh,vw,vmin,vmax都是相对单位。（px是相对单位我也感到很诧异，差点就被我划分到绝对单位）

3.定义字体风格 font-style

font-style：设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。理论上讲，用户代理可以根据正常字体计算一个斜体字体
font-style的值就四种：
    nomarl：默认值，标准的字体样式
    italic：斜体
    obique：倾斜的字体样式
    inherit：从父级继承的字体样式
虽然italic与obique都是表示斜着的文字但是他们有着本质的区别。italic是根据你的字体也就是你的font-family来显示是否有该字体的斜体，如果你的font-family没有斜体这个属性那么这个样式就是不生效的，而obique就不管你是否有斜体这个属性了，统一转为斜着的文字。

4.以小型大写字体或者正常字体显示文本 font-variant

这个样式一般来说用的比较少。他是意义在于定义了大写英文，首字母为正常字号，但是其余的字母仿佛加了个small标签，会显示的比首字母较小。
font-variant的值有三种：
    normal：正常
    small-caps：浏览器会显示小型大写字母的字体
    inherit：规定应该从父元素继承 font-variant 属性的值。

这个样式的 inherit 值在所有的ie上都不支持,并且该属性仅支持英文。

5.定义字体的粗细 font-weight

font-weight ：normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
normal  表示默认值，即正常的字体，相当于取值为 400； bold 表示粗体，相当于 700；font-weight的数值在每个浏览器中表现得都不太一样。这个希望大家亲自去尝试一下。就不一一列举了（偷个懒）

6.简写属性 font

font ：简写属性在一个声明中设置所有字体属性。这个简写属性用于一次设置元素字体的两个或更多方面。使用 icon 等关键字可以适当地设置元素的字体，使之与用户计算机环境中的某个方面一致。注意，如果没有使用这些关键词，至少要指定字体大小和字体系列。
font可以一次性将我们的6种样式全部写完，顺序如下：
    font-style，
    font-variant，
    font-weight，
    font-size/line-height，
    font-family。
允许不对某一样式进行设置，会自动处理成其默认的值。当然还有其他的很多值，最常用的就是上面的6种。其余的比如：
    caption：被标题控件（比如按钮、下拉列表等）使用的字体
    icon：被图标标记使用的字体
    menu：定义被下拉列表使用的字体
    message-box：被对话框使用的字体
    small-caption：caption 字体的小型版本
    status-bar：被窗口状态栏使用的字体

7.定义字体颜色 color

color：属性规定文本的颜色。这个属性设置了一个元素的前景色（在 HTML 表现中，就是元素文本的颜色）；光栅图像不受 color 影响。这个颜色还会应用到元素的所有边框，除非被 border-color 或另外某个边框颜色属性覆盖。
color的值包括颜色的名字（white,red,black等），十六进制的颜色值（#fff,#000,#ff0000等），还有rgb值（（255，255，255），（0，0，0）等）包括rgba(0,0,0,0.3)，还有就是inhert继承父级的颜色