详解CSS网页布局中默认字体样式


  阅读器默许的 款式一般在不同的阅读器、不同的语言版本甚至不同的系统版本都有不同的设置,这就招致如 果直接利用默许 款式的页面在各个阅读器下显示十分不 统一,于是就有了 类似YUI的reset之类用来尽量重写阅读器的默许设置 保障各个阅读器 款式 统一性的做法 。


  拿字体来说,各个阅读器默许的字体 品种、字体大小和字体行高都不一样, 比方IE8的中文版在Windows XP下显示网页时默许字体是宋体,而英文版 确定不会如此 。所以我们需求统一设置默许的字体 款式,以便实现 统一的显示 动机来 保障设计的 统一性和 普及开发效率 。

 

款式优先级


  通常消费者看到的页面的 款式会受到三层操纵:


  第一层是阅读器的默许 款式
  第二层是网页定义 款式
  第三层是消费者自定义 款式


  和CSS一样,后面的优先级 高于前面的,也便是说网页定义 款式 可以 遮蔽阅读器的默许 款式,而消费者自定义 款式优先级最高 。不过,当有 !important 时,网页 款式 可以 遮蔽消费者自定义 款式 。消费者!important > 网页!important > 消费者 > 网页 > 阅读器默许 。

 

字体:arial


  我们页面的绝大 部分内容字符都是中文,毫无 疑难当前为止在网页上最常用也是最通用的显示中文的字体是宋体,然而宋体在显示英文、数字和英文符号时过于 蹩脚, 比方©字符,所以我们一般 期冀通过CSS来实现用更好的字体 款式来显示它们, 而后用宋体来显示中文和中文符号 。之所以 取舍arial是由于:


  Windows和Mac都预装了这款字体,应该是 使用最 宽泛的网页字体了 。它的潜在对手tahoma和helvetica就没有这么 厄运了 。


  视觉设计的专业人士可能会认为在Windows中 使用tahoma、在Mac中 使用helvetica更好, 比方淘宝的默许字体 款式是font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;


  这是一个很不错的 取舍,然而你也会发现Google、YAHOO、Youtube、Bing甚至MSN的新版都 使用arial作为第一默许字体 。所以从 好看和可读性上来讲arial应该是 彻底 可以 承受的 。


  一般状况下设置font-family都会在最终设置通用字体族以 保障其安全性, 比方Google的设置为font-family:arial,sans-serif;,然而至少在非中文版的Win7下当编码是GBK时,IE8会因sans-serif来渲染宋体,招致字体浮现变形,这便是为何淘宝需求在sans-serif前外加宋体而Google无需这样做的缘由 。


  由于中文字体的 取舍十分有限,所以当前全部的主流阅读器都设置 使用宋体来显示中文 。Baidu的首页和搜索 后果页 使用font-family:arial; 可以从侧面 注明这样做的安全性 。可能有人 留神到Firefox中国版默许显示的中文字体是微软雅黑,这是由于谋智网络擅自 批改了消费者自定义 款式,不同意网页的 款式 遮蔽阅读器设置的 款式 。也是由于 类似的状况,我们要弹性设计网页十分主要 。


   使用英文字体作为第一默许字体味招致的问题之一便是中英文以及符号混排时的对齐问题、通过设置行高和hasLayout能解决绝大 部分状况,然而都不会很 圆满,假如把字体改成“宋体”能彻底的解决问题 。很显而易见,这个问题只浮现在IE上 。所以,假如你的网站很少 使用英文、数字和英文符号,那么直接设置{font-family:\5b8b\4f53;}也是很 正当的 取舍 。

 

大小:12px


  12px是宋体能显示的极限, 固然微软雅黑能显示更小的字体,但当前的 利用环境尚未成熟 。由于宋体 根本上是当前显示中文唯一的通用Web字体,所以12px成为最常用的字体大小 。我们固然 可以根据产品的需求来 批改这个默许值 。


  不用考量基于字体大小(em)的设计 。


  在Chrome3.0之后的中文版中,字体大小最小值是12px, 比方你设置最小字体为10px,最终也变成12px 。

 

行高:1.5倍


  这是一个 教训值,不同的产品对这个值要求可能不同,但我们一般会设置最常用的为默许值 。 比方YUI的font中是font:13px/1.231 arial,helvetica,clean,sans-serif;即字体大小默许值是13px,行高是13*1.231=16.003px,默许的行高是默许字体的1.231倍 。关于中文来说,常用的字体大小12px、14px、16px、18px等偶数大小,在IE6和IE7设置其行高也为偶数能解决一些特殊状况下的字体对其问题 。


在IE6和IE7中,行高值必须大于字体的2px 威力 保障字体的 完全显示或当其作为链接时能有效显示下划线 。


设置line-height时, 留神不要 使用单位(包含%在内),由于子节点会继承 通过运算后的line-height值,所以当 使用单位后阅读器会把line-height计算成第一次定义的绝对值,而不会随着字体大小的 变迁而 变迁,而无单位的数值 示意是所在容器的font-size的倍数,所以设置为无单位的数值是最佳 取舍 。


   深刻CSS 行高十分有利于 了解line-height,值得一读 。

 

性能和效率


  大 部分平台都有arial,削减阅读器的搜索 工夫 。


  代码 起码,书写容易 。arial 根本上是名字最短的字体了, 可以节约CSS的大小 。
  全部的字母都小写,当前Google便是这样做的, 好处是既 可以编写更快也能 晋升Gzip压缩的效率 。
  中文最好用unicode 示意, 比方 使用宋体是{font-family:\5b8b\4f53;}, 使用微软雅黑是{font-family:\5fae\8f6f\96c5\9ed1;},这样的 好处是幸免编码问题,同时能得到全部的主流阅读器的 支撑 。
使用正确的字体 品种写法,幸免 使用引号,这样 可以缩短CSS的大小 。中文字体 可以按上一条 模式来编写 。


将来


  通过对中英文及符号混排的测试, 我发现微软雅黑其实 体现相当不错,包含英文数字和英文字符以及在IE6和IE7的显示 动机上,但唯一的遗憾是在XP下假如安装了微软雅黑字体的消费者没有打 开“ 使用屏幕字体的边缘平滑”选项的话,在firefox、Safari和Opera、特殊是IE6下会十分含糊难以辨别 。针对这个问题当前并没有很好的 解决 方案,所以惟独等到IE6 使用比率十分小的时候才可能正式的 使用它 。兴许需求到2014年,XP死掉的时候 。


   固然很早就有了@font-face,然而阅读器的 支撑、网速和商业问题,招致它很少被 利用 。近期关于字体的好 信息是Firefox3.6将 支撑Web Open Font Forma 。关于Web字体 将来的 有关信息 可以看Web 字体的 将来、关于 Web 字体:现状与 将来和再谈 Web 字体的现状与 将来 。