CSS字体属性全解析

话说CSS字体属性font-family、font-style、font-size、font-weight、font-variant：

使用CSS，可以对字体进行设置，字体属性包括五种常见属性：字体系列font-family、字体样式/字体风格font-style、字体大小font-size、字体粗细font-weight、字体变量font-variant。通过这五个属性，可以设定文本在web页面的显示效果或文本的打印效果。

1.字体系列font-family

支持按照优先级顺序列出各种要指派使用的字体，当用户系统没有安装首选字体时候，向后搜索，选用下一个指派的字体解析显示。
如：

说明：由于一般的操作系统与浏览器都安装与支持以下字体，所以web开发中使用最安全的字体系列为：Arial、Helvetica、 Times New Roman、 Times、 Courier New 和 Courier。而Verdana、Georgia、Comic Sans MS、Trebuchet MS、Arial Black和Impact字体对于苹果的Mac系统和微软的Windows系统来说是安全的，但可能不支持安装在像Linux这样的开源操作系统中。其他经常使用但是不太安全的字体还有：Palatino、Garamond、Bookman和Avant Garde等。

2.字体样式/字体风格font-style
font-style属性有三个值：normal、italic和 oblique。三种字体风格对应三种表现的字体效果：
normal：默认样式。浏览器显示一个标准的字体。
italic：浏览器会显示一个斜体的字体。
oblique：浏览器会显示一个倾斜的字体。

容易产生疑问和困惑是italic 和 oblique 之间的区别。主要区别总结为：

字体样式italic、oblique 需要系统中字体文件的支持。
字体名中带有“Italic”、“Cursive”（草书）或“Kursiv”（一种书信体）的字体通常标记为“italic”。
字体名中带有“Oblique”、“Slanted”（斜体）或“Incline”（倾斜）的字体通常标记为“oblique”。
如果“italic”字体不存在，而只有Oblique字体，则使用后者“oblique”字体，但若“oblique”字体不存在，则不能用“italic”替代，此时浏览器会将正常直立字体倾斜一个角度来作为倾斜字体使用。
在很多情况下，斜体和倾斜字体几乎看不出区别，特别是对那些没有特别提供这两种样式的字体来说
从本质上来说，斜体（italic）是一种简单的字体风格，对每个字母的结构有微小的变动，外观区别于正常字体风格。不过，倾斜（oblique）风格则是正常竖直文本的一个倾斜版本。