`
a68091555
  • 浏览: 26428 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

详解CSS网页布局中默认字体样式

阅读更多
浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似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 字体的现状与未来。
分享到:
评论
1 楼 YNG杨 2011-12-03  
如果有各浏览器的css容器默认的样式解释就更好了

相关推荐

    适合初学者的CSS网页布局技巧

    【CSS网页布局技巧详解】 对于初学者来说,掌握CSS网页布局是学习网页设计的基础。以下是一些适合初学者的实用CSS技巧,可以帮助你更高效地创建网页布局。 1. **浏览器差异处理**: - 不同浏览器对CSS的解析可能...

    精通CSS DIV网页样式与布局.pdf+书中实例

    - **定义**:CSS是一种用来增强HTML文档外观的语言,它定义了网页中元素的样式,如颜色、字体大小、布局等。 - **作用**:CSS使得内容与表现分离,便于网页维护和提高页面加载速度。 - **选择器**: - **类选择器...

    CSS中文样式表

    在CSS中,你可以定义文本的字体、颜色、大小、行高,设置元素的布局方式,包括边距、填充、宽度、高度,以及控制元素的对齐方式、背景颜色和图片等。此外,CSS还支持响应式设计,能够根据不同的设备屏幕尺寸和方向...

    网页设计-页面布局篇(Css+Div)

    **标题与描述**:本教程聚焦于网页设计中的关键环节——页面布局,并详细介绍了如何运用CSS和Div技术来构建网页的基本结构。 **重要性**:网页设计是网络开发的重要组成部分之一,良好的页面布局不仅能够提升用户...

    div+css制作的鼠标经过放大字体样式的特效

    ### div+css实现鼠标经过时字体放大的特效详解 在网页设计中,为了提升用户体验以及增强页面的互动性,开发者经常需要实现各种各样的动态效果。本文将详细介绍如何使用div和CSS来制作一个简单的鼠标经过时字体放大...

    CSS中的ul与li样式详解共5页.pdf.zip

    这份名为"CSS中的ul与li样式详解共5页.pdf.zip"的压缩文件很可能包含了关于如何使用CSS来定制这些列表元素样式的深入讲解。 `<ul>` 标签用于创建一个无序列表,通常显示为带有圆点或小方块的项目符号。这些列表可以...

    div+css 布局 demo

    **div+css布局详解** 在网页设计中,`div+css`布局是一种常见的技术,用于组织和控制网页元素的位置和样式。它通过HTML中的`<div>`元素作为容器,配合CSS(Cascading Style Sheets)来实现灵活、可维护的页面布局。...

    Div_CSS.rar_DIV css布局_css大全_css布局

    **Div+CSS布局详解** Div(Division)+CSS(Cascading Style Sheets)布局是网页设计中的核心概念,它能够帮助开发者实现灵活、高效的页面结构和样式控制。本资料包包含"Div_CSS.pdf",是一份全面的学习Div+CSS布局...

    网页样式设计——CSS使用详解_0.rar

    #### 五、CSS布局技术 1. **盒模型** - `margin`:外边距 - `border`:边框 - `padding`:内边距 - `width`/`height`:宽度/高度 - `box-sizing`:定义宽度是否包括内边距和边框。 2. **定位方式** - `...

    div+css 布局模板

    ### div+css布局详解:构建清晰网页结构的艺术 在网页设计与开发领域,`div+css`布局方式因其灵活性、可维护性和响应性而成为现代前端开发中的主流选择。通过结合`div`元素与`css`样式表,开发者能够创建出既美观又...

    CSS快速学习及CSS样式API

    在网页设计和开发中,CSS(Cascading Style Sheets)起着至关重要的作用,它负责定义网页元素的布局、颜色、字体、大小等视觉样式。本教程将深入探讨CSS的核心概念和API,帮助您快速掌握这一强大的样式语言。 1. **...

    用DIV+CSS技术设计的个人网页(网页制作课作业)

    1. 字体样式:通过`font-family`、`font-size`、`color`等属性,可以设定文本的字体、大小和颜色,提升阅读体验。 2. 背景与边框:使用`background-color`、`background-image`和`border`属性,可以给元素添加背景...

    css基本知识.txt细说,对网页布局者有很大帮助

    ### CSS基本知识详解 #### 一、样式定义与设置 CSS(层叠样式表)是网页设计中的一个重要组成部分,主要用于定义HTML元素的显示方式。它能够实现内容与样式的分离,极大地方便了网页的布局与维护。 1. **基本语法...

    div+css布局

    **div+css布局**是网页设计中不可或缺的一部分,它是一种将HTML元素以视觉层次结构进行组织的方法,通过CSS(Cascading Style Sheets)来控制页面的样式和布局。本教程旨在帮助你深入理解和熟练运用div+css技术,...

    CSS样式表与格式布局详解

    CSS(Cascading Style Sheets,层叠样式表)是用于控制网页样式并将其与内容分离的一种标记语言,它是实现网页内容与表现形式分离的重要手段。使用CSS能够简化网页设计的复杂度,使得网页内容的结构与视觉表现分离,...

    CSS层叠样式表手册

    **CSS层叠样式表手册详解** CSS(Cascading Style Sheets)层叠样式表是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。CSS使得网页设计者可以将样式与结构分离,提高了网页的可读性、...

    详解CSS的结构与层叠以及格式化

    在CSS(Cascading Style Sheets)中,结构、层叠和格式化是理解CSS布局的关键概念。首先,我们来看一下它们各自的概念: **结构** 每个HTML或XML文档都有一个结构树,它描述了文档元素之间的关系。结构树中的元素...

    CSS完全使用详解

    1. **变量与计算**: CSS变量(`var()`)允许在样式中复用值,CSS calc()可用于动态计算长度、频率等值。 2. **选择器层级与作用域**: Shadow DOM引入了新的作用域,避免样式冲突,提高组件化开发的可维护性。 3. *...

    CSS布局口诀

    ### CSS布局口诀详解 #### 一、IE边框若显若无,须注意,定是高度设置已忘记 此条口诀提醒我们在处理Internet Explorer(IE)浏览器中的边框显示问题时,需要检查元素的高度是否被正确设置。在IE中,如果一个带有...

Global site tag (gtag.js) - Google Analytics