css-font

1.关于字体，font-family其实用的很别扭，但是又找不到原因

font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。
于是乎学到了Web安全字体组合
常用的字体组合，通用的字体系列。

在CSS中，有两种类型的字体系列名称：

通用字体系列 - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）
特定字体系列 - 一个特定的字体系列（如 "Times" 或 "Courier"）

计算机上的字体
图片.png
图片.png
图片.png
图片.png

2.字体样式font-style

normal  默认值。浏览器显示一个标准的字体样式。
italic  浏览器会显示一个斜体的字体样式。(想一想意大利比萨斜塔)
oblique 浏览器会显示一个倾斜的字体样式。

italic和oblique他们之间的根本区别是italic是对文字的字体设置字体样式，如果该字体没有斜体的样式，这个属性是无效的。
oblique是针对文字本身去设置一个倾斜的字体样式，就算文字字体本身没有倾斜的字体样式，这个属性依旧是可以呈现出倾斜的效果。

3.字体大小font-size

字体大小可是设置px,百分比还有em(ie对em的兼容不是很好)
浏览器中默认多px与em的换算公式为px/16=em
在实际使用中还可以使用百分比与em结合的方式

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

4.font-variant一个我从来没有用过的属性,一个神奇的属性

font-variant:small-caps 浏览器会显示小型大写字母的字体。

使用展示

5.@font-face，css3中新增的属性，可以用来自定义字体。

在项目中经常使用，但是大部分时候是使用iconfont，也可以用来自定义字体，使用如下

<style> 
@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
div
{
    font-family:myFirstFont;
}
</style>