最近有个项目需要对字体进行从新全局处理, 虽然对字体问题不陌生, 什么family问题, line-height问题, em/px问题等等, 但一直没有真正细致的去整理过, 于是乎花了一个上午的时间, 看了很多细致的讨论文章, 还结合自己的实际测试, 得出了以下的一坨, 总算对font这个东西有个踏踏实实掌握, 别人给我分享, 我也应该和各位分享, 我们来看看这坨东西吧
…
对我有用的阅读笔记:
Tahoma 字体从 Win95 就有了,并且从 Win2000 开始,Tahoma 成为 Win 英文系统的默认字体。2007 年,在 Mac OS X v10.5 (Leopard) 中也开始内置 Tahoma 字体。
至今,普及性还是相当不错的。从渐进增强角度讲,font-family: Tahoma, Helvetica, Arial, sans-serif; 可以达到优雅降级的目的。在更好的用户代理中,显示更好的字体,同时用 Arial 殿后,也能保证在尽可能多终端设备中正确显示。
通过对中英文及符号混排的测试,我发现微软雅黑其实表现相当不错,包括英文数字和英文字符以及在IE6和IE7的显示效果上,但唯一的遗憾是在XP下如果安装了微软雅
黑字体的用户没有打开“使用屏幕字体的边缘平滑”选项的话,在Firefox、Safari和Opera、特别是IE6下会非常模糊难以辨认。
中文最好用unicode表示,比如使用宋体是 {font-family:\5b8b\4f53;},使用微软雅黑是{font-family:\5fae\8f6f\96c5\9ed1;},这样的好处是避免编码问题,同时能得到所有的主流浏览器的支持。
因为主流浏览器开始支持全网页缩放, 从现在开始,基于px的设计不用再过于背负违背可用性的恶名了,基于em(文字大小)的设计不能给我们带来太多的好处,反而有可能耗费太多的精力挣扎于如何精确保护视觉设计上.用户调研显示,Verdana 字体是易读性最高的,推荐设置为第一默认字体。
Tahoma 字体的问题是,斜体时,特别是小号时,文字不易阅读,还有就是小麦总结过的下划线问题。Verdana 字体的问题是,字号相同时,比其它字体显示偏大偏宽,这导致混排时效果不佳。考虑中文网页中,一般很少用斜体,因此 Tahoma 依旧是首选。
由 Tahoma显示的中文,在IE 6里,下划线会紧紧的贴住中文字,很难看, 如果一行里同时出现中文和英文,且这一行里有元素被定义了vertical-align属性,在IE 6、7里会导致文字高低不齐,甚至下划线错位, 可以通过定义zoom:1来修正这个bug 。
IE 和 Opera 都没有能用正确的字体显示中文字符。因为在 Comic Sans MS 搜索失效后,理应搜索幼圆字体。但不知道因为什么原因,IE 和 Opera 都没有顺序搜索下一个字体,甚至也没有搜索后面的黑体和sans-serif,而是直接跳到系统默认字体了——请注意,是系统默认字体. (stu66: 通过本人人肉测试, 这里斗胆给文章作者补充两点, ie8已经能遵守W3C的字体解析规范, FF3测试也一致.)
以上学习笔记来源于一下文章的分享:
http://lifesinger.org/blog/2009/11/web-default-font/
http://webteam.tencent.com/?p=1503
http://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.html
http://dancewithnet.com/2009/11/22/default-web-font-style/
http://www.cnblogs.com/ruxpinsp1/archive/2008/05/11/font-in-front-end-development-3.html
http://lifesinger.org/blog/2009/08/font-family-in-css/
各位看官好好参详, 定必功力大增!
我的实际应用总结:
在实际应用中, 对于字体的定义, 需要具体问题具体分析, 按照以上的原理, 结合项目的实际情况, 才能得出最好效果. 例如我本次要做的项目中, 因为有大量中英文混合的情况, 但是中文还没被要求要特别的字体, 所以我可以先优先设置英文字体, 这里我使用 arial, 之后设置宋体(使用”\5b8b\4f53″, 因为项目的页面的编码需要是utf-8, 在FF下直接写宋体不能正确读出), 在IE6/IE7/Opera下虽然实际是不会去读取css设定的”宋体”,而直接使用系统默认宋体, 但是恰好我们绝大部分的系统默认字体也刚好是宋体, 所以我不必担心, 也不必做hack
至于行高问题,在IE和opera下, 中文使用系统默认字体的时候会导致中英文行高不一致, 应该就是”棕熊”大哥在”谈谈网页设计中的字体应用 (3)”总描述的问题所致的. 反正对font问题, 总结一句话: 让能享受好字体的浏览器享受好字体, 不能享受好字体的浏览器要保证易读性.


