body {font-family: Arial, sans-serif; }
这是我迄今发现的最好的全局字体解决方案。当然,所谓“最好”,也只是基于我个人的评判标准。所以我还是得分析一下其他的写法有什么缺点,最后再总结这个写法的特点。
body {font-family: "宋体", sans-serif; }
这个写法可能的缺点在于:
1. 宋体在Safari和Vista的IE 7下,看起来很难看。(我稍后把截图补上)
2. 宋体的英文字很难看。
3. 如果在CSS里写中文,你得小心你HTML和CSS的编码是否一致。
body {font-family: SimSun,sans-serif; }
这样写,可以避免上面的第三个问题。但是宋体本身确实很难看。我们希望在不同平台下,都用各自默认的字体。XP是宋体,Vista是微软雅黑,Mac是黑体。这样的话,只能将字体的第一个设置为英文字体,这样遇到中文的时候,浏览器会自动调用默认字体(Vista IE 7的一些版本里貌似默认还是宋体,这个我就无能为力了,交给用户设置的自主权吧)
body {font-family: Tahoma, sans-serif; }
这是一个不错的解决办法。Tahoma其实是一个挺漂亮的字体(我同事喜欢称它“大河马”,哈哈)。但是它其实会带来一些问题:
1. 由Tahoma显示的中文,在IE 6里,下划线会紧紧的贴住中文字,很难看。
2. IE 6下,Tahoma无法正确的设定为13px。它会跟14px一样大。但是其他浏览器没有这个问题。
3. 如果一行里同时出现中文和英文,且这一行里有元素被定义了vertical-align属性,在IE 6、7里会导致文字高低不齐,甚至下划线错位。
body {font-family: Arial, ans-serif; }
上述两个问题,Arial都没有。但是Arial也有缺点:
1. 比Tahoma难看。
2. Tahoma里的第三个问题也同样存在。
不过,这个bug是有个解决办法的,就是将这一行定义zoom:1。
所以,如果不嫌难看,定义为Arial是最合适的。如果实在不喜欢,可以将全局定义为Tahoma,然后再将有下划线的(如链接)文字定义为Arial,至少可以缓解一下。
最后,对于全局字体,补充一点:IE里,所有的表单元素都不继承body的字体属性,需要单独设置:
input, label, select, option, textarea, button, fieldset, legend {
font-family:Tahoma,sans-serif;
}
JL3517: 2008-12-28 6:27 pm
哈哈 arial tahoma
学习了
belltoy: 2008-12-28 8:07 pm
字体应该只是个建议,一般指定是衬线字体/非衬线字体/等宽字体就行了吧。
上面指定的字体,除了sans-serif这样的抽象字体,其它我这里全部都没有,哈哈
小麦: 2008-12-28 11:15 pm
只指定sans-serif,我觉得太弱了。如我文中的分析,不同字体之前差别很大,包括字间距、行高、垂直对齐,如果不指定固定的字体,会给网页布局带来很大的风险。
Gabriel: 2008-12-29 1:12 pm
设置了vertical-align属性的块状元素内部的中文和英文不论什么字体在IE6下都是无法对齐的,设置zoom:1也无效,不知小麦是否知道有什么解决办法?
smoke520: 2008-12-29 3:34 pm
貌似ie6的vertical-align问题和layout没什么关系。
dexbol: 2008-12-29 9:21 pm
比较喜欢Courier New
hax: 2008-12-31 5:24 am
最省心的办法: 什么都不设。完全取决于用户的默认设置。呵呵。
小麦: 2008-12-31 2:43 pm
那还用讲。
最省心的办法是做成RSS格式,样式让用户自己去写。。。
bujichong: 2008-12-31 7:51 pm
你说的确实很细致,我一般都是默认用Tahoma,它看上去比宋体好看很多,而且在字体大小上与12px或者说0.75em的中文看上去大小比例还是比较接近的,Verdana偏大,Arial偏小偏紧凑,不好看,呵呵,不过还真没注意你说的13px和14px一样大
魔方网: 2009-1-5 12:45 pm
呵呵,你可真细心呀,还真不曾注意到这些,谢谢!
MrJin: 2009-1-9 9:08 pm
楼主很用心,对于需要精确效果的页面而言。这类设置会非常有用。对于一般用户与开发者而论,使用浏览器默认字体即可。
楼主的用心可以看出。对页面字体的控制与设置的思考,将CSS的工作进行的更加深入了。
HicroKee: 2009-2-8 10:01 am
虽然这么说,但你的BLOG的风格设的却是font-family:Arial,Helvetica,sans-serif; 我用fedora+firefox3+YaHei,除了表单的字体,其它的还是很好看。
CSS全局字体实践 « 歪卜: 2009-2-14 9:34 pm
[...] 原文地址http://www.mikkolee.com/118 [...]
关注互联网发展,为访客创造价值! » Blog Archive » 打造自己的Reset.css: 2009-3-5 11:07 am
[...] 射雕的文章 。另外,小麦的文章 [...]
我想网 » Blog Archive » 打造自己的reset.css: 2009-4-17 9:59 am
[...] 接下来要设置的是font-family属性,可以参考射雕的文章。另外,小麦的文章中提到,表单元素的字体在IE中都不能继承父元素的字体,所以要单独设置。 [...]
橘左近: 2009-7-20 11:57 am
可以请教个问题吗
我希望我网站字体按这个顺序
font-family:Trebuchet MS,Arial,宋体;
我喜欢Trebuchet MS这个字体,所以希望是默认的
我遇到的问题是
全中文情况下ie6,7没问题,ie8下字会往下沉
有英文出现ie6字也往下沉
有方法可以确保都能正常显示吗
打造自己的 Reset.css | 芒果: 2009-9-6 10:23 pm
[...] font-family 属性,可以参考射雕的文章。另外,小麦的文章中提到,表单元素的字体在 IE [...]
默认Web字体样式 | 互联网的那点事: 2009-11-23 8:01 pm
[...] 8. Tahoma 字体的问题是,斜体时,特别是小号时,文字不易阅读,还有就是小麦总结过的下划线问题。Verdana 字体的问题是,字号相同时,比其它字体显示偏大偏宽,这导致混排时效果不佳。考虑中文网页中,一般很少用斜体,因此 Tahoma 依旧是首选。 [...]
SOHU媒体技术产品中心-创意设计组 » Blog Archive » 三谈 Web 默认字体: 2009-12-19 1:53 pm
[...] Tahoma 字体的问题,小麦总结过。在 IE6 下,Arial 字体在下划线的显示上的确略有优势,甚至有神奇的魔数 [...]
打造自己的Reset.css – SHOPEX模板,ECSHOP模板,ZEN CART模板: 2010-1-7 9:24 am
[...] 射雕的文章 。另外,小麦的文章 [...]
关于 Web 默认字体(转载整理,很好很有用,收藏学习下。) | 落伍者_Tang的Blog: 2010-2-2 11:44 am
[...] 8. Tahoma 字体的问题是,斜体时,特别是小号时,文字不易阅读,还有就是小麦总结过的下划线问题。Verdana 字体的问题是,字号相同时,比其它字体显示偏大偏宽,这导致混排时效果不佳。考虑中文网页中,一般很少用斜体,因此 Tahoma 依旧是首选。 [...]
» CSS WEB字体定义最佳方式 >> Y7L8'Blog---DIV.CSS.JAVASCRIPT.SEO: 2010-3-11 9:59 am
[...] 8. Tahoma 字体的问题是,斜体时,特别是小号时,文字不易阅读,还有就是小麦总结过的下划线问题。Verdana 字体的问题是,字号相同时,比其它字体显示偏大偏宽,这导致混排时效果不佳。考虑中文网页中,一般很少用斜体,因此 Tahoma 依旧是首选。 [...]
再谈Web默认字体 « 可乐吧: 2010-6-10 8:23 pm
[...] 8. Tahoma 字体的问题是,斜体时,特别是小号时,文字不易阅读,还有就是小麦总结过的下划线问题。Verdana 字体的问题是,字号相同时,比其它字体显示偏大偏宽,这导致混排时效果不佳。考虑中文网页中,一般很少用斜体,因此 Tahoma 依旧是首选。 [...]
Web 默认字体 | JuiceBAR: 2010-7-28 12:20 pm
[...] Tahoma 字体的问题,小麦总结过。在 IE6 下,Arial 字体在下划线的显示上的确略有优势,甚至有神奇的魔数 [...]