默认Web字体样式
通常用户看到的页面的样式会受到三层控制，第一层是浏览器的默认样式，第二层是网页定义样式，第三层是用户自定义样式。和CSS一样，后面的优先级高于前面的，也就是说网页定义样式可以覆盖浏览器的默认样式，而用户自定义样式优先级最高。实际情况是虽然浏览器都或多或少提供了用户自定义样式的功能，但是极少数会有用户去自定义，一般用也是高级用户。而浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置，这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致，于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。
拿字体来说，各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如IE8的中文版在Windows XP下显示网页时默认字体是宋体，而英文版肯定不会如此。所以我们需要统一设置默认的字体样式，以便实现一致的显示效果来保证设计的一致性和提高开发效率。
以后准备使用如下默认字体样式：
body{
font: 12px/1.5 arial;
}
字体：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 字体的现状与未来。
最后推荐一下玉伯的《再谈 Web 默认字体》、jjgod的《浏览器如何渲染文本》以及《如何保证网页的字体在各平台都尽量显示为最高质量的黑体？》
您或许有兴趣：
标签：arial, CSS, font, font-family, 宋体
作者：秦歌，时间:2009-11-22 18:36，归纳于：HTML & CSS，订阅：RSS 2.0，引用：Trackback
1.5倍行高在WIN7下显得偏小
如果使用@charset “utf-8″;声明CSS字符集呢？
学习了。
[...] 以上来源：http://dancewithnet.com/2009/11/22/default-web-font-style/ [...]
受教了！
很是受教
[...] 默认Web字体样式 [...]
宋体用 simsun 表示不是更好？
@idd：文中有一条链接是用来说明这个问题的，Opera不支持simsun，所以使用unicode是更好的方式。
[...] 看这一切都是因为秦歌和玉伯： 《默认WEB字体样式》 [...]
佩服 这些小细节都注意到了
很不错~ 学习~ 谢了~~
[...] 原文：http://dancewithnet.com/2009/11/22/default-web-font-style/ 分类: 前端开发, 前端重构, 视觉设计 标签: 前端重构, 字体 评论 (0) Trackbacks (0) 发表评论 Trackback [...]
[...] 原文：http://dancewithnet.com/2009/11/22/default-web-font-style/ [...]
我觉得行高line-height为 1.6 ~ 1.8 比较合适。
长见识了，学习！
我的web新作~~
反传统web风格: http://abincn.cn/
欢迎大家点评.提出有效建议.
谢谢啦~!
[...] 原文：http://dancewithnet.com/2009/11/22/default-web-font-style/ Categories: 技术 Tags: web前端开发 Comments (0) Trackbacks (0) Leave a comment Trackback [...]
写得好详细，谢谢博主的分享
[...] 默认Web字体样式 @ 随网之舞 有兴趣的朋友还可以看一下另一篇针对该文进行补充的《再谈 Web [...]
[...] 默认Web字体样式 @ 随网之舞 有兴趣的朋友还可以看一下另一篇《再谈 Web 默认字体》 [...]
呵呵，很有帮助，从中学到好几点。谢谢了
[...] 默认Web字体样式 @ 随网之舞 有兴趣的朋友还可以看一下另一篇针对该文进行补充的《再谈 Web [...]
[...] 秦歌这篇文章总结得很不错，俺挑刺来啦： [...]
细节能够看出一个的功底。先谢下秦歌，另外就是那个行高确实待商议，个人习惯1.8或是2.0的行高，我觉得这样会便于阅读。
[...] 以上学习笔记来源于一下文章的分享: http://lifesinger.org/blog/2009/11/web-default-font/http://webteam.tencent.com/?p=1503http://dancewithnet.com/2008/06/17/it-is-time-to-discard-font-size-adjustments/http://www.cnblogs.com/ruxpinsp1/archive/2008/05/11/font-in-front-end-development-4.htmlhttp://dancewithnet.com/2009/11/22/default-web-font-style/http://www.cnblogs.com/ruxpinsp1/archive/2008/05/11/font-in-front-end-development-3.htmlhttp://lifesinger.org/blog/2009/08/font-family-in-css/ [...]
[...] 原文地址: 默认Web字体样式 @ 随网之舞 [...]
[...] 默认Web字体样式 @ 随网之舞 对上文的补充 再谈 Web 默认字体 @岁月如歌 [...]
[...] 原文地址: 默认Web字体样式 @ 随网之舞 [...]
[...] 默认Web字体样式（推荐） 谈谈网页设计中的字体应用（推荐） [...]
[...] 在著名的網頁設計網站A List Apart中，有篇文章描寫了網頁設計中文字大小和閲讀性的關係，至今尤其是入門學習設計的網頁愛好這都會對字體大小設定有所困惑，在選擇字體大小和行高等，都應該和整個網頁設計作整體考量，要考慮整個機構和醒目性，尤其是内文，若文字太密集不好閲讀，很容易使眼睛疲累；若字體稀疏也並非好事，太疏離的字體會讓文章看起來如同百花筒無法集中焦點。在以上的A List Apart作者Jason Santa Maria提到一個Kim認爲非常重要的觀點，就是x-height，即使文字再小，適當的x-height依然能很清晰的閲讀到文字。看看下圖 Kim有很多客戶都很喜歡把yahoo作爲參考標準，如字體，我們這次也拿yahoo來當作參考如何。在yahoo我們查驗代碼就看到字體設定為 13px/1.231 這個是什麽意識？有篇文章——隨網之舞-默认Web字体样式就詳細的描寫了這個問題，13px*1.231就是行高，只要是解決ie對於em解析尺寸的差異。 [...]
[...] source [...]
[...] 最近疯狂测试 reset.css, 第一个首要测试点就是默认字体。前不久秦歌的帖子和我的再谈，收到了很多朋友的反馈。重新整理了下，请先仔细查看测试页面： [...]
[...] 最近疯狂测试 reset.css, 第一个首要测试点就是默认字体。前不久秦歌的帖子和我的再谈，收到了很多朋友的反馈。重新整理了下，请先仔细查看测试页面： [...]
1.8em;路过～
通过对比说出了为什么要选择arial，也说出了为什么不选择arial
[...] 通常用户看到的页面的样式会受到三层控制，第一层是浏览器的默认样式，第二层是网页定义样式，第三层是用户自定义样式。和CSS一样，后面的优先级高于前 面的，也就是说网页定义样式可以覆盖浏览器的默认样式，而用户自定义样式优先级最高。实际情况是虽然浏览器都或多或少提供了用户自定义样式的功能，但是极 少数会有用户去自定义，一般用也是高级用户。而浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置，这就导致如果直接 利用默认样式的页面在各个浏览器下显示非常不一致，于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。 作者原文点击这里 [...]
不错~
看你的一篇文章，能够延伸到很多知识。谢谢。
body{font-family: \9ED1\4F53, \6587\6CC9\9A7F\6B63\9ED1\4F53, “\534E\6587\7EC6\9ED1″;font-size:0.9em;}
我测试了办公室的所有浏览器IE6-8 火狐 谷歌 兼容的很好，不知道有没有问题。
学习了(font-family:\5b8b\4f53;)，细节决定成败:)
[...] 默认Web字体样式 @ 随网之舞 有兴趣的朋友还可以看一下另一篇针对该文进行补充的《再谈 Web [...]
[...] 默认Web字体样式 @ 随网之舞 有兴趣的朋友还可以看一下另一篇针对该文进行补充的《再谈 Web [...]
非常不错，真专业。
其实我发现微软雅黑表达英文时不行，单引号和双引号的半角和全角一点也不好。但显示中文的效果是不容质疑的。
另你的这博客网页背景在谷歌浏览器下有些不正常。请查看一下。
[...] http://dancewithnet.com/2009/11/22/default-web-font-style/ [...]
[...] 原文转自：http://dancewithnet.com/2009/11/22/default-web-font-style/ 转载请注明本文链接：http://www.rainleaves.com/html/1645.html由 lyhydfp 发表在 html+css分类目录，并贴了 css、css 字体样式 标签。 [...]
[...] http://dancewithnet.com/2009/11/22/default-web-font-style/ [...]
[...] http://dancewithnet.com/2009/11/22/default-web-font-style/ ; 默认Web字体样式 Tags: css 阅读: 0. 分类： Web前端. 标签： css. [...]
[...] 这几天我还看了两篇讲述 CSS 字体设定的很好的文章。第一篇看到的是《再谈 Web 默认字体》。这篇文章开始时我匆匆浏览了一下，觉得非常不错，这天就一直在我的浏览器里开着。今天自习看了一下文章的留言，又找到了这一篇《默认Web字体样式》，看下来感觉更有帮助。他们页面的字体也很美观，不是我这个 MT4 站点可以比的。其实我觉得 WordPress 的很多模板的默认字体就已经很不错了，自己改改的意义也不是很大。可对于 MT4 站点来说，模板的字体就需要作者改动许多了，这两篇文章的意义也就大的多了。在 MT5 中的 Pico 风格对这一点有了很大的改善，但其它的一些之前就有的模板就还是有这个问题。 [...]
[...] http://www.pjhome.net/article/Web/mac_os_fonts.htm关于MacOS下字体的一些研究 http://dancewithnet.com/2009/11/22/default-web-font-style/ 默认Web字体样式 [...]
[...] http://www.pjhome.net/article/Web/mac_os_fonts.htm关于MacOS下字体的一些研究 http://dancewithnet.com/2009/11/22/default-web-font-style/ 默认Web字体样式 [...]
[...] http://www.pjhome.net/article/Web/mac_os_fonts.htm关于MacOS下字体的一些研究 http://dancewithnet.com/2009/11/22/default-web-font-style/ 默认Web字体样式 [...]
[...] http://www.pjhome.net/article/Web/mac_os_fonts.htm关于MacOS下字体的一些研究 http://dancewithnet.com/2009/11/22/default-web-font-style/ 默认Web字体样式 [...]
[...] http://www.pjhome.net/article/Web/mac_os_fonts.htm关于MacOS下字体的一些研究 http://dancewithnet.com/2009/11/22/default-web-font-style/ 默认Web字体样式 [...]
[...] 回答：推荐你看下 @随网之舞 的这篇文章《默认 Web 字体样式》http://dancewithnet.com/2009/11/22/default-web-font-style/ [...]
[...] http://www.pjhome.net/article/Web/mac_os_fonts.htm关于MacOS下字体的一些研究 http://dancewithnet.com/2009/11/22/default-web-font-style/ 默认Web字体样式 [...]
[...] http://www.pjhome.net/article/Web/mac_os_fonts.htm关于MacOS下字体的一些研究 http://dancewithnet.com/2009/11/22/default-web-font-style/ 默认Web字体样式 [...]
[...] http://www.pjhome.net/article/Web/mac_os_fonts.htm关于MacOS下字体的一些研究 http://dancewithnet.com/2009/11/22/default-web-font-style/ 默认Web字体样式 [...]