快捷搜索:

CSS网页设计字体大小(em)探讨

秦歌(YanKaven)的站点:

本日是 Firefox3的2008下载日 ,这就意味着Firefox3正式宣布了。Firefox3有浩繁的改进和新功能,我最关注的功能之一是 “全页面缩放(Full page zoom)” 。这就意味着Firefox3和Opera以及IE7+都可以让用户“完全节制显示内容的大年夜小同时自动调剂页面结构和布局”,说白了便是可以让全部页面直接放大年夜或缩小却不会乱掉落。这就意味着我们不用再斟酌为了可造访性而全部页面是基于字体大年夜小(em)的结构了。

在CSS中,有两种单位。一种是绝对长度单位,包括英寸(in)、厘米(cm)、毫米(mm)、点(pt)和派卡(pc)。另一种是相对长度单位,包括em、ex和像素(px)。ex因为在实际利用中必要获取x大年夜小,因浏览器对此处置惩罚要领异常粗拙而被扬弃(更多内容可以参考Eric A. Meyer的《CSS势力巨子指南》),以是现在的网页设计中对大年夜小间隔的节制应用的单位是em和px(当然还有百分数值,但它必须是相对付别的一个值的)。

在css中,1个“em”定义为一种给定字体的font-size值。以是1em可能随元素的不合而不合,它会相对付父元素字体大年夜小而改变。在常见浏览器下,默认字体的大年夜小为16px。常见有两种措施来进行网页设计:

设置默认字体大年夜小为10px:

body{font-size:62.5%;}

#wrapper{width:97.4em;}

这便于依次谋略出其他元素的长宽值,比如某个容器#wrapper的宽度是974px,CSS中定义为97.4em。本站随网之舞便是依据这种要领来实现的。

设计默认字体大年夜小为网页中最常用字体的大年夜小,比如最常用字体的大年夜小是12px:

body{font-size:75%;}

#wrapper{width:81.1667em;}

这样虽然省去了设置默认字体的大年夜小,然则有时却为严格尺寸设计带来麻烦,比如你要设置那个宽为974px的容器#wrapper就会碰到此类麻烦。着实第一种措施也会碰到类似麻烦,只不过比第二种少些。

基于字体大年夜小的设计好处很显着,当用户调剂浏览器默认字体的大年夜小时,字体和页面会随之缩放,能够满意挺这种措施的人常说的一个优点便是弱视的人可以经由过程放大年夜字体来看清楚页面内容,增强了页面的可造访性。

每个屏幕都有分辨率,比如1280×1024分辨率时屏幕就有1280×1024个点,这每个点便是一个像素(px)。以是使用px来设计网页,不存在em那种相对付父元素字体大年夜小变更而变更的问题。而实际上绝大年夜部分的站点设计都是基于px设计的。在Windows平台下IE7之前都无法经由过程调剂浏览器中的“字体大年夜小”来调剂文今大年夜小,非IE浏览器可以,但实际上是一样平常基于px的页面,一旦仅仅调剂了文今大年夜小页面就会乱掉落(在Firefox 2下不雅看除中国雅虎外的门户网站,调剂一下字体大年夜小就懂得了)。

为了IE下不能调剂以px为单位的字体大年夜小,而非IE下可以的问题,YUI CSS Tools采纳了如下代码来设置默认1em的大年夜小,支持用户的字体大年夜小调剂:

body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}

为此IE默认环境下,1em的大年夜小是13.3333px,以是你会看到YUI CSS Grids里面那些诸如width:73.076em;这样的值。

以是,基于字体大年夜小(em)的设计和基于px的设计比拟而言:

基于字体大年夜小(em)的设计页面带来的缩放效果有限,最早基于字体大年夜小设计的门户网站应该便是Yahoo和MSN了,而实际上它们也仅仅是包管了高低缩放三级而已,再多就乱掉落了。

现在的站点越来越多的图文混排,图像的高度和宽度本身便是像素数。除非你经由过程CSS来把图片的大年夜小设置为响应的em值,就像本站的Logo这样,否则图片是不会跟着翰墨变更而变更的。然则假如采纳的是背景图片,那就基础上无计可施了。以是实际上基于字体大年夜小来做图文混排设计的网页必要对图像的设计是有相称严格的要求的,纵然如斯仍无法完美办理,但繁杂度却上升不少。

基于字体大年夜小的网页设计,将使长度变得的异常的不直不雅,导致设置一个宽度变得异常麻烦,YUI CSS Grids中阐清楚明了这点。并且因为em会相对付父元素字体大年夜小变更而变更的问题,导致图文混排的繁杂设计时异常麻烦。分外是在流行过度设计和正确到像素的这个浮躁期间。着实连Google和百度这种异常简单的首页都或多或少的使用px来结构。

现在主流浏览器都支持了“全网页缩放”功能,Safari尚未支持这个功能,而是像Firefox2一样支持文本缩放,然则具有讥诮意味的是Apple页面基础上都是基于px的,以是一缩放就乱掉落,我笃信Safari支持这个功能仅仅是光阴问题。两年前有篇《95%的中国网站必要重写CSS》很盛行,虽然包管用户的可造访性是应该的,然则应该找到其最佳实现的措施,毫无疑问浏览器的“全页面缩放”功能是最佳选择。从现在开始,基于px的设计不用再过于背负违抗可用性的恶名了,基于em(翰墨大年夜小)的设计不能给我们带来太多的好处,反而有可能消费太多的精力挣扎于若何正确保护视觉设计上,设计师的精力应该更多的放在内容的理解、快速出现、语义化、对屏幕涉猎器的支持等等方面上。

举世范围内IE6已经不到40% 了,中国用户比率应该高些,但趋势是一样的,终究IE8都出Beta了,IE6会很快成为历史的。假如你是偏执狂,必要斟酌Firefox2和Safari的话,或许设置body{font-size:10px;}是一个不错的法子,中国雅虎的首页便是使用类似道理。总之,是时刻不用斟酌基于字体大年夜小(em)的设计了,分外是针对IE6的办理规划。

原文:

您可能还会对下面的文章感兴趣: