转自:http://www.52css.com/article.asp?id=1174

  浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。

  拿字体来说,各个浏览器默认的字体种类、字体大小和字体行高都不一样,比如IE8的中文版在Windows XP下显示网页时默认字体是宋体,而英文版肯定不会如此。所以我们需要统一设置默认的字体样式,以便实现一致的显示效果来保证设计的一致性和提高开发效率。

样式优先级
  通常用户看到的页面的样式会受到三层控制:
  第一层是浏览器的默认样式 
  第二层是网页定义样式 
  第三层是用户自定义样式 
  和CSS一样,后面的优先级 高于前面的,也就是说网页定义样式可以覆盖浏览器的默认样式,而用户自定义样式优先级最高。不过,当有 !important 时,网页样式可以覆盖用户自定义样式。用户!important > 网页!important > 用户 > 网页 > 浏览器默认。

字体: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 字体的现状与未来。

转载于:https://www.cnblogs.com/waiting4u/archive/2010/10/09/1846640.html

【转帖】详解CSS网页布局中默认字体样式相关推荐

  1. css网页布局中文字排版的属性和用法

    前段时间,学习了几个大的网站的图文混排的方法.今天总结下, css网页布局中文字排版的相关属性以及用法 .包括:设定字体.颜色.大小.段落空白,首字下沉.首行缩进.中文字的截断.固定宽度词内折行(wo ...

  2. html footer 布局,详解CSS经典布局之Sticky footer布局

    何为Sticky footer布局? 我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分.当页头区和内容区的内容较少时,页脚区不是随着内容区 ...

  3. html body最小高度,CSS网页布局中的最小高度问题的解决方法

    假定有二个BOX,我们需要它的最小高度为150PX. CSS 复制代码代码如下: div.box1,div.box2{ width: 300px; min-height: 150px; backgro ...

  4. css label 居中布局_详解 CSS 居中布局技巧

    水平居中元素:通用方法,元素的宽高未知 方式一:CSS3 transform .parent { position: relative; } .child { position: absolute; ...

  5. float属性html,详解CSS样式中的float属性

    详解CSS样式中的float属性.float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的fl ...

  6. 网页设计中的默认字体样式详解

    浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...

  7. html nthchild作用,详解CSS中:nth-child的用法

    前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是":nth-child". 下面我将用几个典型的实例来给大家讲解:nt ...

  8. Android中measure过程、WRAP_CONTENT详解以及xml布局文件解析流程浅析(下)

       本文原创, 转载请注明出处:http://blog.csdn.net/qinjuning 上篇文章<<Android中measure过程.WRAP_CONTENT详解以及xml布局文 ...

  9. 详解css中的em单位

    文章目录 详解CSS中的em单位 解释 Examp-01 源码 Example-02 源码: 详解CSS中的em单位 css中的长度单位有很多,可谓五花八门,而下面本篇文章就来给大家介绍一下em单位. ...

最新文章

  1. Linux如何从图形界面切换到命令界面
  2. WebSocket客户端连接不上和掉线的问题以及解决方案
  3. java远程监控服务器配置_JAVA VirtualVM远程监控配置
  4. 【转】DICOM:DICOM三大开源库对比分析之“数据加载”
  5. 【OpenCV 例程200篇】39. 图像灰度的线性变换
  6. Struts2之数据标签(二)
  7. java传递引用参数
  8. 程序员面试金典——11.3元素查找
  9. Jenkins的Windows Slave的配置
  10. Unity URP/SRP可编程渲染管线
  11. 手机怎么下载python呢_安卓手机端怎么安装Python?
  12. 使用vuex实现一个简单的小应用
  13. 利用google地图获取位置经纬度坐标
  14. wordpress主题安装,wp主题模板安装技巧
  15. oracle大对象的存储,(16 ) Oracle数据库可以存储极大的对象,CLOB表示【16】大对象。...
  16. 静音键盘 知乎_如何“静音”您的嘈杂机械键盘
  17. LIN Bus | 一个应用广泛的串行通信协议
  18. jquery 实现购物车的商品总数及价格计算
  19. Excel神器之xlwings的安装
  20. python 如何调试uc浏览器_如何使用 UC浏览器开发者版 进行移动端调试

热门文章

  1. 最小割分治(最小割树):BZOJ2229 BZOJ4519
  2. Django打造在线教育平台_day_4: 找回密码
  3. Scrum 团队成立 -- 软件工程
  4. phpcms开启、关闭在线编辑模板的方法
  5. linux系统内核流转浅析
  6. SqlServer中bit类型的性别的一些问题
  7. 在DataGireView中加筛选条件
  8. 聚焦CSDN技术主题月:深度学习框架的重构与思考专场回顾
  9. 用 WEKA 进行数据挖掘,第 2 部分: 分类和群集
  10. 理解 Lua 的那些坑爹特性