PIZn

      很多时候，我都在为书写 CSS 中的 Font-family 而发愁，因为使用不同的字体，在不同的浏览器、不同的操作系统环境下是有不同的体现的。

      为了能够更好地书写好 Font-family，我学习和参考了相关 CSS 和字体设计的知识，了解到 CSS 字体堆栈中的艺术，并在此做下小小总结。

      何为 CSS 字体堆栈？

      当我们书写 Font-family 的时候，目的之一就是为某一个标签定义字体族，并为之添加备份使用字体。可以假设，当您的计算机上面没有 Font-family 中的第一种字体的时候，浏览器就好选择下一种字体来表现。而 CSS 字体堆栈的艺术所在，便是基于不同字体的宽高比，不同浏览器平台和不同操作系统下来为 Font-family 选择合适、正确的字体。

      让我们先来看一个例子：

1. body{
2. font-family:Verdana,Arial,Sans-serif;
3. }

      这样书写的 Font-family 其实是不合理的，在《”.字体设计一二三事、》中，我们可以了解到，Verdana 是宽无衬线字体，Arial 是窄无衬线字体。“宽”和“窄”是指一个字的宽高之比，我们在设计 Font-family 的时候，应尽量使用同样类型的字体。最基本的字体堆栈，是基于不同字体之间的宽高比的。

      补充一些分类：

      在《”.字体设计一二三事、》中只是简单提到字体的分类，在这补充一下详细点的分类。

      常用的宽无衬线字体：Verdana,Geneva

      常用的窄无衬线字体：Tahoma,Arial,Hevetica

      常用的宽衬线字体：Georgia,Vtopia

      常用的窄衬线字体：Times,Times New Roman

      常用的等宽字体：Courier,Courier new

      创建正确、高效的 CSS 字体堆栈有如下步骤：

      1，选择有必要，合适或者您喜欢的字体；

      2，判断字体属于那种类型，是窄衬线字体？宽无衬线？还是等宽字体？

      3，为 Linux 操作系统上的浏览器选择字体，例如 DejaVo Sans 字体，URM Gothic L 字体等；

      4，为 Mac 操作系统上的浏览器选择字体，例如 Helvetica Neue 字体，Helvetica 字体等；

      5，为 windows 操作系统上的浏览器选择字体，这个比较熟悉；

      6，在字体族中包含进去最基本的字体：Sans-serif ；

      7，确保字体的名字空间是包裹在单引号或者双引号里面的；

      8，测试一下所见到的字体，这个需要有条件才行。 

      下面，看一下我们修改好的 Font-family ：

1. body{
2. font-family:"DejaVu Sans", "URW Gothic L","Helvetica Neue”, Helvetica,Arial, "Microsoft Sans Serif",sans-serif;
3. }

      个人觉得比较不错的几组 CSS 字体堆栈（win 平台下）：
      窄无衬线字体族：

1. font-family:Tahoma,Helvetica,Arial,Sans-serif;

      宽无衬线字体族：

1. font-family:Vendana,Geneva,"Trebuchet MS",sans-serif;

      衬线字体不二之选：

1. font-family: Geogia, Times New Roman, Times, serif;

      等宽字体：

1. font-family: Lucida Console, Monaco, Courier New, mono, monospace;

      参考文献：
      Font stacks
      Revised Font stacks