日期:2014-01-01  浏览次数:21258 次

网页制造aiyiweb文章简介:我们页面的绝大部分内容字符都是中文,毫无疑问目前为止在网页上最常用也是最通用的显示中文的字体是宋体,但是宋体在显示英文、数字和英文符号时过于蹩脚,比如字符,所以我们普通期望通过CSS来实现用更好的字体款式来显示它们,然后用宋体来显示中文和中文符号

秦歌(YanKaven) 的站点http://dancewithnet.com/

默认Web字体款式

通常用户看到的页面的款式会遭到三层控制,第一层是浏览器的默认款式,第二层是网页定义款式,第三层是用户自定义款式。和CSS一样,后面的优先级高于前面的,也就是说网页定义款式可以覆盖浏览器的默认款式,而用户自定义款式优先级最高。实际情况是虽然浏览器都或多或少提供了用户自定义款式的功用,但是极少数会有用户去自定义,普通用也是高级用户。而浏览器默认的款式往往在不同的浏览器、不同的言语版本甚至不同的系统版本都有不同的设置,这就导致如果直接利用默认款式的页面在各个浏览器下显示非常不分歧,于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器款式分歧性的做法。

拿字体来说,各个浏览器默认的字体品种、字体大小和字体行高都不一样,比如IE8的中文版在Windows XP下显示网页时默认字体是宋体,而英文版肯定不会如此。所以我们需求统一设置默认的字体款式,以便实现分歧的显示效果来保证设计的分歧性和提高开发效率。

当前预备使用如下默认字体款式:

body{
  font: 12px/1.5 arial;
}

字体:arial

我们页面的绝大部分内容字符都是中文,毫无疑问目前为止在网页上最常用也是最通用的显示中文的字体是宋体,但是宋体在显示英文、数字和英文符号时过于蹩脚,比如©字符,所以我们普通期望通过CSS来实现用更好的字体款式来显示它们,然后用宋体来显示中文和中文符号。之所以选择arial是由于:

  1. Windows和Mac都预装了这款字体,应该是使用最广泛的网页字体了。它的潜在对手tahomahelvetica就没有这么侥幸了。
  2. 视觉设计的专业人士可能会认为在Windows中使用tahoma、在Mac中使用helvetica更好,比如淘宝的默认字体款式font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
    这是一个很不错的选择,但是你也会发现Google、YAHOO、Youtube、Bing甚至MSN的新版都使用arial作为第一默认字体。所以从美观和可读性上来讲arial应该是完全可以接受的。
  3. 普通情况下设置font-family都会在最后设置通用字体族以保证其安全性,比如Google的设置为font-family:arial,sans-serif;,但是至少在非中文版的Win7下当编码是GBK时,IE8会因sans-serif来渲染宋体,导致字体出现变形,这就是为什么淘宝需求在sans-serif前加上宋体而Google无需这样做的缘由。
  4. 由于中文字体的选择非常无限,所以目前所有的主流浏览器都设置使用宋体来显示中文。Baidu的首页和搜索结果页使用font-family:arial;可以从侧面说明这样做的安全性。可能有人留意到Firefox中国版默认显示的中文字体是微软雅黑,这是由于谋智网络擅自修正了用户自定义款式,不允许网页的款式覆盖浏览器设置的款式。也是由于类似的情况,我们要弹性设计网页非常重要。

使用英文字体作为第一默认字体会导致的问题之一就是中英文以及符号混排时的对齐问题、通过设置行高和hasLayout能处理绝大部分情况,但是都不会很完满,如果把字体改成“宋体”能彻底的处理问题。很明显,这个问题只出如今IE上。所以,如果你的网站很少使用英文、数字和英文符号,那么直接设置{font-family:\5b8b\4f53;}也是很合理的选择。

大小:12px

  1. 12px是宋体能显示的极限,虽然微软雅黑能显示更小的字体,但目前的使用环境尚未成熟。由于宋体基本上是目前显示中文独一的通用Web字体,所以12px成为最常用的字体大小。我们当然可以依据产品的需求来修正这个默认值。
  2. 不用考虑基于字体大小(em)的设计
  3. 在Chrome3.0之后的中文版中,字体大小最小值是12px,比如你设置最小字体为10px,最后也变成12px。

行高:1.5倍

  1. 这是一个经验值,不同的产品对这个值要求可能不同,但我们普通会设置最常用的为默认值。比如YUI的font中是font:13px/1.231 arial,helvetica,clean,sans-serif;即字体大小默认值是13px,行高是13*1.231=16.003px,默认的行高是默认字体的1.231倍。对于中文