今日份CSS学习：font的相关属性

一、font-style

font-style属性是用来设置字体样式的。

其默认值为normal，还可以选择 italic 和 oblique 来使字体倾斜。

<style type="text/css">
    .one{font-style: normal;}
    .two{font-style: italic;}
    .three{font-style: oblique;}
</style>

虽然 italic 和 oblique 的效果看起来一样，但它们使字体倾斜的原理不同。

italic 是斜体样式，就是字体自带的斜体属性；oblique 是倾斜体样式，是使字体向右倾斜。

但是，并不是所有字体都具有斜体的样式，如果当前字体没有可用的斜体版本，会选用倾斜体（oblique）替代。反之，如果当前字体没有可用的倾斜体版本，会选用斜体（italic）替代。

二、font-variant

font-variant用于定义小型大写字母文本。

其默认值为normal，用small-caps可以显示小型大写字母的字体。

<style type="text/css">
    .one{font-variant: normal;}
    .two{font-variant: small-caps;}
</style>

三、font-weight

font-weight属性用于设置文本的粗细。

其默认值为normal，用bold、lighter设置粗细，也可以用数值设置粗细。他们三对应的数值分别是400、600、300。

<style type="text/css">
    .one{font-weight: normal;}
    .two{font-weight: bold;}
    .three{font-weight: lighter;}
    .four{font-weight: 400;}
    .five{font-weight: 600;}
    .six{font-weight: 300;}
</style>

四、font-size

font-size属性用于设置字体大小。默认值为medium，对应16px。

绝对大小关键字的定义有x-small、small、medium、large、x-large、xx-large

 五、line-height

line-height属性用于设置文本的行高。默认值为normal，对应的数值取决于浏览器。

六、font-family

font-family属性指定一个元素的字体。

<style type="text/css">
    .one{font-family: '宋体';}
    .two{font-family: '黑体';}
    .three{font-family: 'Arial';}
    .four{font-family: 'Times New Roman';}
</style>

七、font属性的缩写 

以上的几种元素一条一条设置会很长，可以对其进行缩写。

<style "text/css">
    .one{font-style: italic;
         font-variant: small-caps;
         font-weight: bold;
         font-size: 12px;
         line-height: 16px;
         font-family: 'Times New Roman';}
    .two{font:italic small-caps bold 12px/16px 'Times New Roman';}
</style>

但是要注意的是，必须包含以：font-size、font-family。
可以选择性包含的值为：font-style、font-variant、font-weight、line-height。
font-style、font-variant 和 font-weight 必须在 font-size 之前
line-height 必须跟在 font-size 后面，由 "/" 分隔，例如 "12px/16px"
font-family 必须最后指定