关于font，你了解多少？

是不是有新手为网页字体设置而烦恼？设置非默认字体，而Browser压根儿没安装，或者当你特别喜欢“font:"微软雅黑"时浏览器却无法渲染？关于"font"，你了解多少？

1、少用非系统字体。

此处只讨论微软的Windows环境下，Mac OS与Linux暂且不说。诚然，Windows下自带的中文字体少得可怜，只有“宋体”、“黑体”、“楷体”（Win7与Win7-版本该字体不同）、“仿宋”、“微软雅黑”等，而此时，你却特别想用“方正XX体”，但这些字体却未必安装在浏览者的电脑里……首先，必须明确，你是否会在网页或网站中大量使用这种字体，如果你仅仅是为了制作某个Banner或者标题，那就大可不必了。你完全可以把这个效果制作成图片，甚至于微软也为了使其官网风格看上去统一，而将宣传页大段微软雅黑字体的文字使用图片替代。非使用这些字体不可呢？解决办法如下：

@font-face {
font-family: Your FontName;
src: url( 字体.eot ); /* IE */
src: url( 字体.ttf ) format("truetype");  /* 非IE */
src:...
}

这是CSS里的一段字体声明，Your FontName为你声明的字体名称，url里的路径，是你字体存放的位置。而当你需要调用该字体时，你可以这样写：

font-family: Your FontName;

这么做将会使浏览器把事先声明的字体文件下载下来，以保证浏览时的效果，然而必须提醒你的是一个字体文件大体积可能高达数MB，而为了兼容数个浏览器，你可能需要在服务器存放数个字体的副本（上面的例子是十分simple的），而当网页的访问量达到某个数时服务器就会...因此，这种方法往往很少被使用。

2、font-family与font-size、font-weight的位置。

额，神马？这个还有顺序？
首先需要说明：font与font-family、font-size的关系，大致类似background与background-image、background-color的关系，后者往往使用混合写法，但前者显然很少使用，就是因为可能出现的错误。如果字体使用缩写，应将字号写在前面，而不是像background那样可以以任意顺序书写。
从浏览器渲染字体的角度来说，先定义font-family，之后定义font-size、font-weight将会影响字体的渲染，从而出现问题外形变化等一系列问题，因此，在写此三组属性时的顺序应该是font-size、font-weight、font-family。
font属性与background属性相同，都是对相关属性的缩写，不同的是，Font属性的各项值严格遵守特定的顺序：

font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family]

font: bold 20px/30px "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, Sans-serif;

3、关于font-family...

你还习惯这样写么？

font-family:"微软雅黑","华文细黑"

这涉及到编码的问题，因为有时候浏览器会把css中的中文解析为乱码，此时该属性会失效，因此一般都推荐这样写：

font-family:Microsoft Yahei,STHeiti;

事实上，同一个字体，不仅有中文、西文名称，还有unicode、unicode2名称，如微软雅黑的unicode名称是\5FAE\8F6F\96C5\9ED1,那么你这样写也是可以的：

font-family:\5FAE\8F6F\96C5\9ED1,STHeiti;

等等，我怎么知道微软雅黑unicode编码？
额，你现在没有用ie6或360神马的吧？如果没有，请你按下f12（Firefox请确保安装firebug）,很好，然后切换到“控制台”选项卡（Chrome为例），在命令行中输入：

escape('微软雅黑')

回车。
返回的这一串就是该字体unicode编码，友情提示，请将"%u"替换成“/”。

4、关于字体识别度的问题。

如果你是html/css的菜鸟，而同时又兼职“业余”网页设计师，那此问题就需要有所了解了：
无论中文还是西文，字体被分为“有衬线”、“无衬线”、“手写体”和“古字腕”。
一般情况下，有衬线字会显得比较清晰（当字体较小时该优势明显），而无衬线字则会显得比较圆润，肉眼容易接受。什么是衬线？请你按住键盘ctrl键并向上滑动鼠标滑轮。。。看到了么？
古字腕笔者也不是特别了解，大致上比较类似于中文的小篆（有误请指正，谢谢！），而手写体，可以列举出楷体、XXX钢笔体之类的。Mac系的产品一般都是偏向于无衬线字体的（苹果在保持文字清晰度的同时而追求问题的美感，这点令笔者非常佩服），而微软，宋体，你懂得。。。然而在网页上，14px或更低的字体，宋体的确是十分清晰的，而更大的字号，微软雅黑，华文细黑（Mac OS下常用）则更好。大段的手写体在显示彰显强烈的风格化的同时，也会让人看上去不舒服，字体识别度低的，比如狂草，甚至会影响阅读，因此不宜大量使用。