Jade Dungeon

CSS 字体

字体种类
字体属性设置

字体种类

font-family

CSS的font-family命令，指定了网页元素所使用的字体。下面是一个例子。

font-family: Georgia, "Times New Roman", "Microsoft YaHei", "微软雅黑", 
             STXihei, "华文细黑", serif;

优先使用排在前面的字体。
如果找不到该种字体，或者该种字体不包括所要渲染的文字，则使用下一种字体。
如果所列出的字体，都无法满足需要，则让操作系统自行决定使用哪种字体。

根据这些规则：

font-family应该优先指定英文字体，然后再指定中文字体。否则，中文字体所包含的英文字母，会取代英文字体，这往往很丑陋。
为了保证兼容性，中文字体的中文名称和英文名称，应该都写入font-family。比如，「微软雅黑」的英文名称是「Microsoft YaHei」。
中文字体的中文名称，以及由多个单词组成的英文名称，应该放在双引号内。

font-family默认采用Tahoma. Tahoma是英文Windows操作系统的默认字体，这个字体比较均衡，显示中英文混排很不错，是经久耐看的一款字体。
Mac OS X系统有一款比Tahoma更典雅的系统默认字体：Helvetica，非Mac系统的Helvetica字体都是Rip版。
Arial是早期Windows英文系统的默认字体，XP和Vista上都是Tahoma。
最后的sans-serif是针对强悍的Linux DIY族。Linux默认只有kernel, 字体完全由用户自定义，针对这部分用户，sans-serif可能能派上用场。

最后，无论在XP还是Vista下，不指定网页的中文字体时，默认就是宋体。因此font-family里的「宋体」是多余的，可以省去。

中文网页的常用字体，过去只有「宋体」，现在微软增加了「雅黑」，但「雅黑」还算不上安全字体。在迫不及待地使用雅黑时，我们仍然要注意降级问题。

由于雅黑的字体大小、字距和宋体都有区别，我们需要注意降级后，各个用户代理在排版上可能出现的问题。

font-face

@font-face在网页上实现自定义字体，使用的技术无非是CSS——这意味着不再依赖于Flash，PHP甚至Javascript。网页开放字体格式（即.WOFF）被定为网页字体的标准格式，W3C正在对其进行标准化。

Front Squirrel网站（http://www.fontsquirrel.com/fontface）提供的所有字体在商业上都是免费的。这个网站有数百种字体供选择，从sans-serif到novelty风格的字体都有。

为了保证@font-face在所有浏览器中都能工作，你需要几种不同的字体格式，对此， Font Squirrel也有解决方案。网站提供了@font-face套件，其中有你需要的所有字体格式，以及HTML和CSS。如果你找不到你想用字体的@font-face套件，他们同样免费提供了生成器，能将你的字体转换为所需的多种格式。使用生成器时，你需要保证你拥有使用这个字体的正确授权。

Firefox中字体配置

在Firefox 中（目前似乎只有Firefox有此功能），可以分别单独指定Sans Serif、Serif及Monospace的中西文字体，然而这个选项并未设置在工具菜单中，不过可以在Addressbar中键入about: config，然后在Filter中过滤font找到如下Preference Name：

font.name.monospace.x-western
font.name.monospace.zh-CN
font.name.sans-serif.x-western
font.name.sans-serif.zh-CN
font.name.serif.x-western
font.name.serif.zh-CN

你可以依照上述Sans Serif、Serif及Monospace的原则来分别指定一种对应字体。

按照W3C的CSS规则，在font（或者font-family）的最后都要求指定一个Serif这样的Generic-family，避免客户端实在没有指定字体时使用本机上的Serif默认字体。

字体的规范书写

我们首先总结一下，需要有哪些值得注意的事情以及相应的解决方案：

字体名称

当字体具体某个取值中若有一种样式名称包含空格，则需要用「双引号」或「单引号」表示，如：

font-family: "Microsoft YaHei", "Arial Narrow", sans-serif;

如果书写中文字体名称为了保证兼容性也会添加引号，如：

font-family: "黑体-简", "微软雅黑", "文泉驿微米黑";

因为无法保证用户的计算机内已经安装了指定的字体，也不能保证使用@font-face提供的字体能够正确的下载，提供通用字体名，可以使得浏览七在无法获得最佳字体的情况下使用一个相对接近的备选字体。

除了可以用字体名和通用字体名指代，还可以通过@font-face指定的可以下载的字体

中英文字体相互覆盖的问题

字体中英文名称差异：字体名称包括中文的，会又由于用户的特殊色织导致中文生命失效。
在命名的过程中，尽量使用英文字体名称中英文字体内容差异,中文字体里包括英文字母和数字，但是不够漂亮，而英文字体里，大多不包含中文。

设置字体的时候，先英后中，保证中英字体兼容到。

font-family: Arial,"Microsoft YaHei";

找不到指定的字体

不同的操作系统的默认字体差异：根据自己的受众不同，可以有不同的优先权。还有浏览器版本差异，有些用户使用旧版浏览器

可以加上旧版的操作系统的字体：mac中的「华文黑体」，「冬日黑体」，win下的「黑体」
最后还需要补充一个通用字体名，以防万一。一般非衬线字体在显示器中显示效果会比较好，所以我们在最后添加sans-serif。

引用外部字体

大多数的中文字体由于版权原因不能随意使用，这里推荐一个免版权而且漂亮的中文字体思源黑体，该字体为Adobe与Google推出的一款开源字体，有七种字体粗细（ExtraLight、Light、Normal、 Regular、Medium、Bold 和 Heavy），完全支持日文、韩文、繁体中文和简体中文，字形优美，依稀记得小米公司好像有使用过。

鉴于中文字体的体积比较大（一般字库全一点的中文字体动辄几Mb），所以较少人会使用外部字体，如果真的需要引入，也可以考虑通过工具根据页面文字的使用多少单独生成中文字体，以减小文件大小。

首先@font face规则是语序网页开发者为网页指定在线字体。可以消除对用户电脑字体的依赖。

我们通过src属性：

local()：指定本地的字体。
url("")：指定网页字体。

当使用url的时候，会出现跨域的问题（cors policy）,由于站点服务器，没有指定允许跨域请求，就导致了字体无法正确的加载问题。

如果是自己的服务器，可以将Access-Control-allow-origin设置为*即可。

随着@font-face的不断流行，产生了许多新的字体格式图集，成为网络字体。 Google Font API就是基于@font-face的特性开发出一套优秀的网络字体库。（暂不支持中文字体，凉凉）

有三种方式来添加字体链接：

Standard 方式：

<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Condiment'>

@import方式：

@import url(http://fonts.googleapis.com/css?family=Condiment);

JavaScript 方式：（通过添加动态脚本并执行来导入字体，代码省略）

例子

英文非衬线：

font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif

英文衬线：

font-family: Georgia, Times New Roman, Times, serif

宋体：

font-family:  Georgia, "Times New Roman", Times, 宋体, SimSun, serif;

仿宋体：

font-family: Georgia, "Times New Roman", Times, "FangSong", "仿宋", STFangSong, "华文仿宋", serif;

楷体：

font-family: Georgia, "Times New Roman", "KaiTi", "楷体", STKaiti, "华文楷体", serif;

为了防止找不到字体，可能参考以下例子设置默认的字体保底：常用的英文安全字体组合效果查看

还有一些大公司的常见写法以供参考：

小米

font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei",
	"Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;

简书

font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, 
	"Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

字体属性设置

所有CSS字体属性

Property	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

字体样式

主要是用于指定斜体文字的字体样式属性。

p.normal  {font-style:normal;}
p.italic  {font-style:italic;}
p.oblique {font-style:oblique;}  /* 倾斜，但不是斜体 */

超链接的字体效果

四个链接状态是：

`a:link`	正常，未访问过的链接
`a:visited`	用户已访问过的链接
`a:hover`	当用户鼠标放在链接上时
`a:active`	链接被点击的那一刻

当设置为若干链路状态的样式，也有一些顺序规则：

a:hover必须跟在a:link和a:visited后面
a:active必须跟在a:hover后面

a:link    {color:#FF0000;}  /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover   {color:#FF00FF;}  /* mouse over link */
a:active  {color:#0000FF;}  /* selected link */

text-decoration属性主要用于删除链接中的下划线：

a:link    {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover   {text-decoration:underline;}
a:active  {text-decoration:underline;}

背景色：

a:link    {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover   {background-color:#FF704D;}
a:active  {background-color:#FF704D;}

结合若干CSS属性显示为方框：

a:link, a:visited {
          display: block;
      font-weight: bold;
            color: #FFFFFF;
 background-color: #98bf21;
            width: 120px;
       text-align: center;
          padding: 4px;
	text-decoration: none;
}

a:hover, a:active { background-color:#7A991A; }