CSS字体属性

font-family

body {
  font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft Yahei", tahoma, "WenQuanYi Micro Hei"
}

该属性定义文本使用哪种字体，字体相关的属性都是有继承性的，所以通常只需要为body元素设置font-family。上面的代码中写了很多字体，这是为了保证一种回退机制，如果用户的电脑根本没有第一种字体或者浏览器不支持第一种字体，那么浏览器就会使用第二种字体，以此类推直到找到一个支持的字体。多种字体之间用逗号分隔，如果某种字体它是有空格的，如Helvetica Neue就需要用引号包裹，其他的如tahoma就不需要引号包裹。如果字体中有英文字体，一定要放到最前面，英文字体会影响数字和标点符号。

font-size

font-size设置字体的大小。chrome的最小字体为12px，所以小于12px的字体默认会以12px字体显示。我写了一个小例子：

文字的大小默认是medium，可选关键字xx-small，x-small，small，medium，large，x-large，xx-large，我通常很少用他们，除了这些还可以是smaller, 它表示设置为比父元素更小的尺寸，larger比父元素更大的尺寸。用的较多的是CSS长度单位，还可以用百分比表示，百分比是基于父元素的文字大小。

font-style

定义文本的风格。默认值normal表示正常显示，italic斜体风格，oblique倾斜的字体。我试了下italic和oblique在效果上几乎没差别，但是细微之处，italic表示斜体，然而并不是所有的文本都有斜体的，没有斜体变量的特殊字体会应用oblique，即把字体倾斜一个角度，这样看起来它也是斜体了，oblique就是把字体倾斜一个角度。

font-variant

Hello World

Hello World

<p style="font-variant: normal">Hello World<p>
<p style="font-variant: small-caps">Hello World<p>

用于把小写字母转换为小型的大写字母显示。默认值normal，可以是small-caps。

font-weight

定义文本的粗细，默认值normal。属性值bold定义粗体。bolder定义更粗的文本，它是相当于父元素的字体粗细，如果父元素是normal，那么bolder和bold是一样粗的。lighter定义更细的字体，同样是相对于父元素。属性值还可以是数值100,200,300,400,500,600,700,800,900中的一个，400等于normal，700等于bold。

font-face

这个属性略复杂，简单来说它可以让我们在网页开放中使用自定义字体，常用属性font-family, src, font-weight, font-style

font-family

定义字体的名字

src

定义字体的路径，拿我经常用的iconfont字体图标举例：

@font-face {
  font-family: "iconfont";
  src: url('iconfont.eot'); /* IE9*/
  src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

  
.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  // 保证字体图标的平滑
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

不同后缀的文件是为了兼容更多的浏览器，url属性指定字体的路径，相对路径、绝对路径或外链都可以。format属性指的是字体的格式，值可以是truetype, opentype, truetype-aat, embedded-opentype, svg，主要用于帮助浏览器识别字体。另外还可以用local加载本地的字体，这样就避免去服务器请求资源，当然用户本地要有这种字体才可以，使用方法如下：

@font-face {
  font-family: "iconfont";
  src: local('Microsoft Yahei'),local('HelveticaNeue-Light');
}

font-weight

这个属性是为了确保在使用font-weight时，能以我们定义的字体来显示加粗的字体，因为一套字体很可能有多个版本，每个版本对应一种粗细，例如：

// normal
@font-face {
font-family: 'QH';
font-weight: 400;
src: local('HYQIhei 40s')
}
// weight: 500
@font-face {
  font-family: 'QH';
  font-weight: 500;
  src: local('HYQihei 50S');
}

.p1 {
  font-family: 'QH';
  font-weight: 400;
}
.p2 {
  font-family: 'QH';
  font-weight: 500;
}
<p class="p1">Hello World</p>
<p class="p2">Hello World</p>

font-style

font-style定义不同风格的字体，由于不是每种字体都有斜体的，所以一套字体，我们可能需要准备两种，一种是正常的(normal)，一种是斜体(italic)，我们就可以这样使用：

@font-face {
font-family: 'BASE';
font-style: normal;
src: local('BASE normal')
}

@font-face {
  font-family: 'BASE';
  font-style: italic;
  src: local('BASE italic');
}

.p1 {
  font-family: 'BASE';
  font-style: normal;
}
.p2 {
  font-family: 'BASE';
  font-style: italic;
}
<p class="p1">Hello World</p>
<p class="p2">Hello World</p>

知识扩展

css通用字体系列一共五种，理论上讲用户安装的任何字体都会是其中的一种，这五种字体分别是：

Serif字体

衬线字体是比例的，并且有上下短线，例如Times, Georgia

Sans-serif字体

无衬线字体也是成比例的，它没有上下短线，例如Helvetica, Geneva, Verdana, Arial，我平常用无衬线字体较多，下面一张图直观表现什么是衬线：

Monospace等宽字体

等宽字体非等比例字体，通常定义计算机代码、打印机文本会使用这种字体。由于是等宽的，所以字母i和m宽度相同，常见的字体有Courier, Courier New, Andale Mono

Cursive字体

模仿人的手写体。常见的有Author, Comic Sans

Fantasy 字体

这些字体无法用任何特征定义，不属于以上四种字体的都属于Fantasy字体，网上很多奇特的艺术字属于这种字体

各平台常用字体

参考文章
Win平台字体
Microsoft Yahei: Win默认的无衬线黑体类字体;
Tahoma: 一种常用的无衬线字体;
SimSun: 宋体，不适合大号文字;
Arial: 一种常用的无衬线西文字体(西文即英文字体);

Mac ios平台字体
Helvetica Neue, Helvetica: 一种常用的无衬线西文字体;
HeiTi SC: Mac默认的无衬线黑体类字体;
Hiragino Sans GB: 冬青黑体一种常用的无衬线字体;

Android
Droid Sans: 安卓系统默认无衬线西文字体;

Linux平台字体
WenQuanYi Micro Hei: 文泉驿微米黑为Liunx系统下推荐字体;