网页设计中的字体介绍与选择

让你以更合理的文字展现你的内容
服务器君一共花费了163.302 ms进行了4次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。

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

样式优先级

通常用户看到的页面的样式会受到三层控制:

  1. 第一层是浏览器的默认样式
  2. 第二层是网页定义样式
  3. 第三层是用户自定义样式

和CSS一样,后面的优先级高于前面的,也就是说网页定义样式可以覆盖浏览器的默认样式,而用户自定义样式优先级最高。不过,当有 !important 时,网页样式可以覆盖用户自定义样式。用户!important > 网页!important > 用户 > 网页 > 浏览器默认。

字体:arial

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

  1. Windows 和 Mac 都预装了这款字体,应该是使用最广泛的网页字体了。它的潜在对手 tahoma 和 helvetica 就没有这么幸运了。
  2. 视觉设计的专业人士可能会认为在Windows中使用tahoma、在Mac中使用helvetica更好,比如淘宝的默认字体样式是font: 12px/1 Tahoma, Helvetica, Arial, "5b8b4f53", 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:5b8b4f53;}也是很合理的选择。

大小: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倍。对于中文来说,常用的字体大小12px、14px、16px、18px等偶数大小,在 IE6 和 IE7 设置其行高也为偶数能解决一些特殊情况下的字体对其问题。
  2. 在 IE6 和 IE7 中,行高值必须大于字体的 2px 才能保证字体的完整显示或当其作为链接时能有效显示下划线。
  3. 设置 line-height 时,注意不要使用单位(包括%在内),因为子节点会继承经过运算后的 line-height 值,所以当使用单位后浏览器会把 line-height 计算成第一次定义的绝对值,而不会随着字体大小的变化而变化,而无单位的数值表示是所在容器的 font-size 的倍数,所以设置为无单位的数值是最佳选择。
  4. 深入CSS 行高非常有利于理解 line-height,值得一读。

性能和效率

  1. 大部分平台都有 arial,减少浏览器的查找时间。
  2. 代码最少,书写方便。arial 基本上是名字最短的字体了,可以节约 CSS 的大小。
  3. 所有的字母都小写,目前 Google 就是这样做的,好处是既可以编写更快也能提升 Gzip 压缩的效率。
  4. 中文最好用unicode表示,比如使用宋体是{font-family:5b8b4f53;},使用微软雅黑是 {font-family:5fae8f6f96c59ed1;},这样的好处是避免编码问题,同时能得到所有的主流浏览器的支持。
  5. 使用正确的字体种类写法,避免使用引号,这样可以缩小CSS的大小。中文字体可以按上一条方式来编写。

未来

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

虽然很早就有了@font-face,但是浏览器的支持、网速和商业问题,导致它很少被应用。最近关于字体的好消息是Firefox3.6将支持Web Open Font Forma。关于Web字体未来的相关信息可以看Web 字体的未来、关于 Web 字体:现状与未来和再谈 Web 字体的现状与未来。

本文地址:http://www.nowamagic.net/librarys/veda/detail/685,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/685

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《算法导论(原书第2版)》 科曼(Cormen T.H.) (作者), 等 (作者, 译者), 潘金贵 (译者)

《算法导论(原书第2版)》一书深入浅出,全面地介绍了计算机算法。对每一个算法的分析既易于理解又十分有趣,并保持了数学严谨性。本书的设计目标全面,适用于多种用途。涵盖的内容有:算法在计算中的作用,概率分析和随机算法的介绍。本书专门讨论了线性规划,介绍了动态规划的两个应用,随机化和线性规划技术的近似算法等,还有有关递归求解、快速排序中用到的划分方法与期望线性时间顺序统计算法,以及对贪心算法元素的讨论。本书还介绍了对强连通子图算法正确性的证明,对哈密顿回路和子集求和问题的NP完全性的证明等内容。全书提供了900多个练习题和思考题以及叙述较为详细的实例研究。

更多计算机宝库...