有了空页面，是要填充内容了。在页面里填充内容，无非也就是填充文字、图片、音频、视频等。这里讲一下文字字体和图片格式的经验。
　　页面的字体不能像做WORD文档那样设置姚体幼圆隶书之类的艺术字体，那些字体会导致没有安装那些字体的用户显示不出正确的效果，最保险的做法是使用宋体。系统默认的字体也是宋体，其实是 Times New Roman 字体，只是 Times New Roman 不能定义中文字体时，就会自动选择宋体来显示中文。我们可以不用在 CSS 中设置“font-family:宋体”，只需设置要使用的英文字体即可。先看下图中各个字体在不同字号下的显示效果：


　　上图字体的尺寸使常用的单位是 px。网页字体的尺寸用 px 和 pt，先说说这两种尺寸的不同。px 是像素的意思，像素是用在显示设备中的单位，比如显示器的分辨率是 1024 * 768，意思是显示器在宽度上可以显示出 1024 个像素点，高度上可显示 768 个像素点，一个像素是构成计算机图像的最小单位，用 Photoshop 中的铅笔工具选择直径为一像素的画笔点出来的点，就是最小的一个像素。pt 是点或磅值的意思，主要是用于印刷打印显示，1pt=1/72英寸≈0.35毫米，这个单位是个绝对单位，也可以理解为，1pt 大概就是针式打印机打出来的一个针点那么大。
　　在设计网页时，最好使用 px，因为页面主要是给用户在显示器上观看的，很少用于网页打印。另外，在显示中文文字时，一个 12px 的汉字的宽高就是 12 像素，这样可以根据一行要显示多少个汉字来设置表格或者层的宽度。因为页面的宽高，图片的宽高等，都是以 px 为单位。
　　再看上图所列的不同字体下的文字，仔细分辨可发现，Batang、BatangChe、Dotum、DotumChe、Gulim、GulimChe、MingLiU、PMingLiU 字体中的中文跟宋体不太一样。Batang、Dotum、Gulim 是韩文字体，但是也可以显示出不一样的中文字体。MingLiU 是细明体，PMingLiU 是新细明体，是微软向华康购买的中文繁体字型。BatangChe、DotumChe、DotumChe、Courier、Courier New、MingLiU 中的英文字符是相等宽度。MinigLiU 和 PMingLiU 下的中文字体最小 11px 显示正常（不粘连），其它字体下的中文字体最小 12px 显示正常。有的中文字体在 11px 或 10px 时依然是按照 12px 来显示。Arial、Dotum、DotumChe、Gulim、GulimChe、MS Sans Serif 英文字体中的小写 L 和大写 I 在视觉上无法区分。
　　说了这么多，是不是花了眼了？说说经验之谈吧，HTML标签中若仅用于显示中文，字体最小使用 12px 的宋体，如果特殊需要更小的 11px 字体那么可以尝试 MingLiU；若仅用于显示英文字体可采用最小 11px 的 Verdana 或 Tohoma；若仅用于显示数字（如日期时间点击下载次数)可使用 11-13px 的 Batang、11-15px 的 BatangChe、12px 的 Dotum、12-15px 的 DotumChe、12-13px 的 Gulim、12-15px 的 GulimChe、12-13px 的 Times New Roman，这几种字体的数字细窄大方又规矩，如果使用 Georgia 参差不齐的数字会略显活泼一些。若中英文混合显示，可用最小 12px 的 Verdana 或 Tohoma，或 11px 的 MingLiU，CSS 可写成 { font-size:12px; font-family:Verdana } 或 { font-size:12px; font-family:Tohama } 或 { font-size:11px; font-family:Verdana, MingLiU } 或 { font-size:11px; font-family:Tohama, MingLiU }。
　　最后要注意一个小细节问题，当字体设置为 MS Sans Serif、Verdana 等某些字体时，文字中仅有中文以及全角符号而没有英文字母或符号时，要比其它字体下的文字显示位置偏上几个像素。最最后要说明一下，字体仅限在 WinXP 及以上系统中正常显示，在苹果系统或其它系统中，很多字体是不对应的，不一定会正常显示。
　　看得头都大了吧？以前都没有这样细致地去研究字体的问题，为了这篇文章，专门费了不少时间收集资料整理思路，还是有许多地方没能深入探讨，抱歉。

　　再说说图片格式，常见的有 gif、jpg 和 png。什么时候使用什么格式的图片，有点讲究。
　　gif 支持最多256种颜色、无损压缩、完全透明和多帧动画，不支持半透明效果。如果图像是点阵像素，点线面构成，颜色不那么丰富，小图标（），就用 gif 吧！
　　jpg 和 png 支持256*256*256种颜色。jpg 是有损压缩，会造成画面质量有损失，如果图片是照片之类颜色丰富，图像线条复杂，不要求细节精致，就用 jpg 吧。png 是无损压缩，支持半透明效果，综合了 gif 和 jpg 的优点。同样质量的图像保存为 png 要比 jpg 容量要大一些。同样是要求透明效果，gif 和 png 也有差异，gif 的透明，如果边界有毛边，比如在 Photoshop 里用魔法棒工具抠图，边缘有弧线的部分就会出现毛边，此时如果保存为透明的 gif ，毛边部位就会被白色填充，透明效果就很差劲，只有保存为 png ，因为毛边部分，是半透明的。
　　png 在 IE 下背景不会透明，需要使用一些 js 脚本来处理，推荐一个，unitpngfix，地址：http://labs.unitinteractive.com/unitpngfix.php。
　　总结一下，没有特殊情况，尽量少用 png。小图标、简洁的图像、边缘无毛边的半透明图像使用 gif，复杂图像使用 jpg。