浏览器默认的样式往往在不同的浏览器、不同的语⾔版本甚⾄不同的系统版本都有不同的设置，这就导致如果直接利⽤默认样式的页⾯在各个浏览器下显⽰⾮常不⼀致，于是就有了类似YUI的reset之类⽤来尽量重写浏览器的默认设置保证各个浏览器样式⼀致性的做法。 拿字体来说，各个浏览器默认的字体种类、字体⼤⼩和字体⾏⾼都不⼀样，⽐如IE8的中⽂版在Windows XP下显⽰⽹页时默认字体是宋体，⽽英⽂版肯定不会如此。所以我们需要统⼀设置默认的字体样式，以便实现⼀致的显⽰效果来保证设计的⼀致性和提⾼开发效率。
样式优先级
通常⽤户看到的页⾯的样式会受到三层控制:
伊斯兰国第⼀层是浏览器的默认样式
第⼆层是⽹页定义样式
第三层是⽤户⾃定义样式
和⼀样，后⾯的优先级⾼于前⾯的，也就是说⽹页定义样式可以覆盖浏览器的默认样式，⽽⽤户⾃定义样式优先级最⾼。不过，当
ap点有 !important 时，⽹页样式可以覆盖⽤户⾃定义样式。⽤户!> ⽹页!important > ⽤户 > ⽹页 > 浏览器默认。
五节句
字体：
我们页⾯的绝⼤部分内容字符都是中⽂，毫⽆疑问⽬前为⽌在⽹页上最常⽤也是最通⽤的显⽰中⽂的字体是宋体，但是宋体在显⽰英⽂、数字和英⽂符号时过于糟糕，⽐如©字符，所以我们⼀般期望通过CSS来实现⽤更好的字体样式来显⽰它们，然后⽤宋体来显⽰中⽂和中⽂符号。之所以选择arial是因为：
Windows和Mac都预装了这款字体，应该是使⽤最⼴泛的⽹页字体了。它的潜在对⼿tahoma和helvetica就没有这么幸运了。
视觉设计的专业⼈⼠可能会认为在Windows中使⽤tahoma、在Mac中使⽤helvetica更好，⽐如淘宝的默认字体样式是
font: 12px/1 Tahoma, Helvetica, Arial, “\5b8b\4f53″, sans-serif;
这是⼀个很不错的选择，但是你也会发现、、、Bing甚⾄MSN的新版都使⽤arial作为第⼀默认字体。所以从美观和可读性上来讲arial应该是完全可以接受的。
⼀般情况下设置都会在最后设置通⽤字体族以保证其安全性，⽐如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
en标准
12px是宋体能显⽰的极限，虽然微软雅⿊能显⽰更⼩的字体，但⽬前的应⽤环境尚未成熟。由于宋体基本上是⽬前显⽰中⽂唯⼀的通⽤Web 字体，所以12px成为最常⽤的字体⼤⼩。我们当然可以依据产品的需要来修改这个默认值。
不⽤考虑基于字体⼤⼩（em）的设计。
在3.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，但是浏览器的⽀持、⽹速和商业问题，导致它很少被应⽤。最近关于字体的好消息是3.6将⽀持
Web Open Font Forma。关于Web字体未来的相关信息可以看Web 字体的未来、关于 Web 字体：现状与未来和再谈 Web 字体的现状与未来。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议