HTML、CSS字体

1. 字体系列

在css中，我们常通过font-family设定文本字体，且通过font-size, color, font-weight，text-decoration等设置字体的属性。

font-family: 指包含一组有共同特征的字体。共有五个字体系列：sans-serif, serif, monospace, cursive, fantasy.

serif: 指的是有衬线的字体，一般用于新闻报纸的文字排版；(注：衬线是指字母末端的装饰性“小细线”)
如Times, Times New Roman, Georgia.

sans-serif：指的是无衬线字体，一般用于计算机屏幕上文本的显示；
如Verdana, Arial Black, Trebuchet MS, Arial, Geneva.

monospace: 指的是字符间有固定宽度的字体，这些字体主要用于显示软件代码示例；
如Courier, Courier New, Andale Mono.

cursive: 指的是类似手写的字体；
如Comic Sans, Apple Chancery.

fantasy: 指的是包含某种风格的装饰性的字体。
如Last NINJA, Impact.

---

1. Web字体

在css中，为了丰富页面，我们可能会使用一些用户计算机没有预装的字体。倘若使用font-family直接定义该字体，会导致用户不能正常显示页面。因此，不难想到，我们可以将字体文件托管到服务器上，然后链接到HTML文件，然后用户浏览器通过对服务器的请求进而下载字体显示页面。幸运的是，现在已经有方法实现这一目标。

我们可以使用@font-face的规则。这个规则允许你定义一种字体的名字和位置，然后可以在你的页面中正常的使用。过程如下：
(1)找到一个字体；
(2)确保有所需字体的所有格式；
(3)把你的字体文件放在web上；
(4)在css中增加@font-face属性；
(5)在css中使用font-family名；
(6)加载页面。

补充字体格式：
.ttf: TrueType 字体
.otf: OpenType 字体
.eot: Embedded OpenTYpe 字体(OpenType 的一种压缩形式，仅IE提供支持)
SVG字体： .svg(SVG是一种通用的图像格式)
Web开放字体格式：.woff (Web开放格式字体)

补充@font-face 语法：

@font-face{    font-family:"";    src=url("");    src=url("");}

最好像font-family一样有备用方案，所以一般指定两个url，第一个是.woff格式，第二个是.ttf格式。

转载来源：http://blog.csdn.net/linwh8/article/details/52550221