有了空页面,是要填充内容了。在页面里填充内容,无非也就是填充文字、图片、音频、视频等。这里讲一下文字字体和图片格式的经验。
页面的字体不能像做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 及以上系统中正常显示,在苹果系统或其它系统中,很多字体是不对应的,不一定会正常显示。
看得头都大了吧?以前都没有这样细致地去研究字体的问题,为了这篇文章,专门费了不少时间收集资料整理思路,还是有许多地方没能深入探讨,抱歉。