《网页设计中的默认字体样式详解》由会员分享，可在线阅读，更多相关《网页设计中的默认字体样式详解（3页珍藏版）》请在金锄头文库上搜索。
1、浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置，这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致，于是就有了类似 YUI 的 reset 之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。拿字体来说，各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如 IE8的中文版在 Windows XP 下显示网页时默认字体是宋体，而英文版肯定不会如此。所以我们需要统一设置默认的字体样式，以便实现一致的显示效果来保证设计的一致性和提高开发效率。样式优先级通常用户看到的页面的样式会受到三层控制: 第一层是浏览器的默认样式 第二层是网页定
2、义样式 第三层是用户自定义样式和 CSS 一样，后面的优先级 高于前面的，也就是说网页定义样式可以覆盖浏览器的默认样式，而用户自定义样式优先级最高。不过，当有 !important 时，网页样式可以覆盖用户自定义样式。用户!important 网页!important 用户 网页 浏览器默认。字体：arial我们页面的绝大部分内容字符都是中文，毫无疑问目前为止在网页上最常用也是最通用的显示中文的字体是宋体，但是宋体在显示英文、数字和英文符号时过于糟糕，比如字符，所以我们一般期望通过 CSS 来实现用更好的字体样式来显示它们，然后用宋体来显示中文和中文符号。之所以选择 arial 是因为： Wi
3、ndows 和 Mac 都预装了这款字体，应该是使用最广泛的网页字体了。它的潜在对手 tahoma 和 helvetica 就没有这么幸运了。 视觉设计的专业人士可能会认为 在 Windows 中使用 tahoma、在 Mac 中使用helvetica 更好，比如淘宝的默认字体样式是 font: 12px/1 Tahoma, Helvetica, Arial, 5b8b4f53, sans-serif; 这是一个很不错的选择，但是你也会发现 Google、YAHOO、Youtube、Bing 甚至 MSN 的新版都使用 arial 作为第一默认字体。所以从美观和可读性上来讲arial 应该是完
4、全可以接受的。 一般情况下设置 font-family 都会在最后设置通用字体族以保证其安全性，比如Google 的设置为 font-family:arial,sans-serif; ，但是至少在非中文版的 Win7 下当编码是 GBK 时，IE8 会因 sans-serif 来渲染宋体，导致字体出现变形，这就是为什么淘宝需要在 sans-serif 前加上宋体而 Google 无需这样做的原因。 因为中文字体的选择非常有限，所以目前所有的主流浏览器都设置使用宋体来显示中文。Baidu 的首页和搜索结果页使用 font-family:arial; 可以从侧面说明这样做的安全性。可能有人注意到
5、Firefox 中国版默认显示的中文字体是微软雅黑，这是因为谋智网络擅自修改了用户自定义样式，不允许网页的样式覆盖浏览器设置的样式。也是由于类似的情况，我们要弹性设计网页非常重要。使用英文字体作为第一默认字体会导致的问题之一就是中英文以及符号混排时的对齐问题、通过设置行高和 hasLayout 能解决绝大部分情况，但是都不会很完美，如果把字体改成“宋体”能彻底的解决问题。很明显，这个问题只出现在 IE 上。所以，如果你的网站很少使用英文、数字和英文符号，那么直接设置 font-family:5b8b4f53; 也是很合理的选择。大小：12px 12px 是宋体能显示的极限，虽然微软雅黑能显示更
6、小的字体 ，但目前的应用环境尚未成熟。由于宋体基本上是目前显示中文唯一的通用 Web 字体，所以 12px 成为最常用的字体大小。我们当然可以依据产品的需要来修改这个默认值。 不用考虑基于字体大小（em）的设计。 在 Chrome3.0 之后的中文版中，字体大小最小值是 12px，比如你设置最小字体为 10px，最后也变成 12px。行高：1.5 倍 这是一个经验值，不同的产品对这个值要求可能不同，但我们一般会设置最常用的为默认值。比如 YUI 的 font 中是 font:13px/1.231 arial,helvetica,clean,sans-serif; 即字体大小默认值是 13px，
7、行高是13*1.231=16.003px，默认的行高是默认字体的 1.231 倍。对于中文来说，常用的字体大小 12px、14px、16px 、18px 等偶数大小，在 IE6 和 IE7 设置其行高也为偶数能解决一些特殊情况下的字体对其问题。 在 IE6 和 IE7 中，行高值必须大于字体的 2px 才能保证字体的完整显示或当其作为链接时能有效显示下划线。 设置 line-height 时， 注意不要使用单位（包括%在内），因为子节点会继承经过运算后的 line-height 值，所以当使用单位后浏览器会把 line-height 计算成第一次定义的绝对值，而不会随着字体大小的变化而变化，而
8、无单位的数值表示是所在容器的 font-size 的倍数，所以设置为无单位的数值是最佳选择。 深入 CSS 行高非常有利于理解 line-height ，值得一读。性能和效率 大部分平台都有 arial ，减少浏览器的查找时间。 代码最少，书写方便。 arial 基本上是名字最短的字体了，可以节约 CSS 的大小。 所有的字母都小写，目前 Google 就是这样做的，好处是既可以编写更快也能提升Gzip 压缩的效率。 中文最好用 unicode 表示，比如使用宋体是 font-family:5b8b4f53; ，使用微软雅黑是 font-family:5fae8f6f96c59ed1; ，这样
9、的好处是避免编码问题，同时能得到所有的主流浏览器的支持。 使用正确的字体种类写法，避免使用引号，这样可以缩小 CSS 的大小。中文字体可以按上一条方式来编写。未来 通过对中英文及符号混排的测试， 我发现微软雅黑其实表现相当不错，包括英文数字和英文字符以及在 IE6 和 IE7 的显示效果上，但唯一的遗憾是在 XP 下如果安装了微软雅黑字体的用户没有打 开“使用屏幕字体的边缘平滑”选项的话，在firefox、Safari 和 Opera、特别是 IE6 下会非常模糊难以辨认。针对这个问题目前并没有很好的 解决方案，所以只有等到 IE6 使用比率非常小的时候才可能正式的使用它。或许需要到 2014 年，XP 死掉的时候。 虽然很早就有了font-face，但是浏览器的支持、网速和商业问题，导致它很少被应用。最近关于字体的好消息是 Firefox3.6 将支持 Web Open Font Forma。关于 Web 字体未来的相关信息可以看 Web 字体的未来、 关于 Web 字体：现状与未来和 再谈 Web 字体的现状与未来。
