font-family、font-style、font-weight、font-variant的区别「In CSS」

学习 CSS，看文档的时候总是对 font 的属性搞不清楚或者总是搞混。

这里总结一下这四个经常搞混的（特别是前面两个）。

font-family

这个属性指的是字体，比如说汉字中常说的行书与草书。

这个属性的值可以有多个，因为某些字体对于某些浏览器来说可能不适用，因此就会逐个往下匹配。

<p>Original line</p>
<p class="test">Test line</p>

p {
    font-size: 2em;
}
        
p.test {
    font-family: fantasy, 'Times New Roman', Times, serif;
}

font-style

这个属性指定的是字体倾斜与否，italic 属性值是通过字体本身倾斜，oblique 属性值让字体倾斜一定角度，看起来效果一样，但是对于有些字体，可能原先不能倾斜，所以设置 italic 属性值不生效，设置成 oblique 就生效了。

<p>Original line</p>
<p class="test">Test line</p>

p {
    font-size: 2em;
}
        
p.test {
    font-style: italic;
}

font-weight 

此属性值定义了字体的宽度，属性值 lighter细，bold粗，bolder更粗，当然也可以设置具体数值100~900，只能是整百哦~

<p>Original line</p>
<p class="test">Test line</p>

p {
    font-size: 2em;
}
        
p.test {
    font-weight: lighter;
}

font-variant 

此属性的作用就是将文字转换成大写后缩小，看下列例子吧~

<p>Original line</p>
<p class="test1">uppercase original line</p>
<p class="test2">font-variant original line</p>

p {
    font-size: 2em;
}
        
p.test1 {
    text-transform: uppercase;
}
        
p.test2 {
    font-variant: small-caps;
}

第二句将第一句所有字母大写了，并没有改动字母的大小，而 font-variant 属性将字母全部大写后又将其缩小了。

总结 

如果把一个字母比作人的话，那么

font-family 属性是美丑

font-style 属性是动作

font-weight 属性是胖瘦

至于 font-variant 属性，我愿意称作是整容(⊙ᗜ⊙)