字体又称书体，是指文字的风格样式，各种不同的浏览器都有默认的样式风格，这些默认风格甚至在字体种类、大小、行高的表现上都存在差异，这也是在Web设计中需要考虑的兼容性问题。我们知道在CSS样式中，要对网页的字体进行设计使用的是font-family属性，它可以设置多个字体，按从前至后的优先级进行匹配显示。下面先对比一些网站的字体使用情况，见下表。
以cn.last.fm为例，“Lucida Grande”这种字体为首选字体，当操作系统能够匹配到这种字体时，浏览器将以该字体进行展现，如果操作系统中不存在该字体，那么它将查找下一种字体“Arial”进行匹配。这样的处理让站点更具兼容性，但是在字体选择上还是要考虑通用性，尽量覆盖所有的操作系统。
-
衬线（Serif）与无衬线字体（Sans-Serif）
上表中，大多数网站都选择了“Arial”作为首选字体，这款字体诞生于1982年，由于它是免费的，所以被微软用于windows 3.1。时至今日，它已经是最常用的标准英文字体，就像简体中文中的宋体一样。但这种字体属于无衬线字体，即比划开始及结束的地方没有额外的装饰，笔画粗细大致一致，所以在阅读上会照成错乱现象，Arial、Tahoma、Verdana都属于这种字体类型。衬线字体阅读性则更强，更注重前后的连续性，例如，Georgia、Times New Roman。对于简体中文而言，通常使用的宋体、黑体、幼圆、微软雅黑（如下图所示）又是什么类型的字体呢？
宋体属于衬线字体，而微软雅黑、黑体、幼圆等则属于无衬线字体。在通常情况下，文章的内文和正文使用的是易读性较佳的Serif字体，可以增加易读性，同时，用户在长时间阅读的时候不易批卷。而标题、表格用字则采用较醒目的Sans Serif字体比较合适，因为它需要显著、醒目。
-
合适的font-family
在字体样式属性设置中，通常会在最后加上Sans Serif或Serif，目的是在浏览器没有找到前面的字体时，根据浏览器的设定选择对应的一种类型的字体进行显示，有了这些灵活的字体样式设置，就可以从中寻找一种最适合的字体供用户阅读。面对各种各样的字体，应该如何选择呢？原则上应该选用衬线字体，显示较大文字的正文内容时也可以考虑无衬线字体。简体中文的排版文字应以中文字体为首选，如：font-family:”宋体”,sans-serif，这样的设置在中文操作系统中不会出现兼容性的问题，若要考虑英文系统，则在宋体后加上常用的英文字体，如：font-family:”宋体”,Comic Sans MS,sans-serif。
综上一些原则，字体的选择需根据实际情况来衡量，与西文相比，中文不适合于较小字号的排版，西文网站常会使用Verdana字体，这种字体在西文11像素下的显示效果非常理想，但如果用它编排中文，则会显得局促，所以中文排版字号会比西文大2～3个像素。在这种情况下，有没有比宋体更合适的字体呢？无衬线字体“微软雅黑”也是一个不错的选择，目前windows vista和windows 7就使用该字体作为默认字体。它支持GBK字体集，包含了Unicode的所有20902个中文字符以及中国国家标准化组织添加的大约80个中文字符，还包含了Big5的繁体中文符和GB2312中的简体中文字符。在字体的设计上，它由微软公司委托方正集团针对LCD液晶显示器设计，具有个性独特、结构优美、识别性强、显示清晰等特点。
-
自定义字体
在css2时代，如果需要在网页中显示一些特殊的字体（如方正汉仪字体），由于并非每个计算机用户都会安装这种字体，我们常常要通过将它制作成图片的方式来实现。这种方式很不方便，如果一个页面内有20个地方使用到该字体，那就得增加20张图片。如今有了CSS3的“@font-face”属性，这些问题就迎刃而解了，可以非常简单地将字体加入页面。如：
/*声明*/
@font-face {
font-family: 'emotion';
src: url('emotion.eot');
}
/*调用*/
Body{
font-family:14px/100% 'emotion';
}
摘录：《大巧不工-web前端设计修炼之道》页码：264