分享
 
 
 

使用em指定字体尺寸时的麻烦

王朝other·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

有几种方法可以用来指定 Web 页面上的字体尺寸。首先,你可以使用关键字,比如small 或者 large;其次,你还可以使用固定的量度,比如象素(pixel)或点陈(point);或者你还可以使用相对量度,比如 em 或者百分比。关键字简单易用,但是缺乏灵活性和精确性,固定量度可能会比较精确,但是对于那些想根据自己的需要和偏好来调整字体尺寸的用户来说,可能会带来一些易用性问题。相对量度可以解决这一易用性问题,但是也会带来它们自己的问题。

应该可行的方法

相对量度能够指定字体的尺寸比一些标准的参考尺寸大多少或者小多少。使用百分比设定字体尺寸能够字体尺寸表示为参考字体的字符框高度(字母字符的顶部到字母字符的底部之间的距离)的一个百分比。

Em 是基于排版转换的一种量度,它定义1em为参考字体的大写字母的高度。出于与其它量度保持一致性的考虑,CSS 定义1em为字符框的高度。以 em 表示的尺寸是十进制小数或者参考字体尺寸的倍数。因此,2em和200%是一样的,而.75em和75%也表示同样的尺寸。

理论上,使用相对量度来指定字体尺寸不论对于 Web 开发人员还是对于 Web 用户都具有明显地优势。通过将字体尺寸指定为标准参考尺寸的一个相对变化值,你可以将焦点集中在尺寸关系上,而无须用特定的数字为每个字体样式指定一个尺寸。

如果更改参考字体的尺寸,所有以相对量度指定的字体都会相应地调整尺寸,以维护其与参考字体的尺寸比值。这就意味着 Web 开发人员只要更改 body 标签一个地方的字体尺寸就可以更改整个页面上所有的字体尺寸。相似地,这种方法还允许访问者调整他们的浏览器的字体尺寸设置,进而调整浏览器窗口中字体的尺寸,而且也不会丢失相对字体尺寸能够传达的任何意义。

天堂中的麻烦

不幸的是,理论上听起来很合理的东西,实际用的时候总是不会那么好。使用相对量度来设置字体尺寸时的一个主要问题是参考字体尺寸缺乏一致的标准。基于 Windows 操作系统的浏览器的传统的默认字体尺寸是16像素,并且假设屏幕的分辨率是每英寸96象素。而在苹果机上,传统的默认字体尺寸是12象素,屏幕的分辨率是每英寸72象素。

虽然 Windows 的默认字体尺寸是推荐的官方标准,但是很多铁杆苹果用户(其中包括很多 Web 开发人员)继续使用传统的苹果默认设置。这些设置趋向于错误地诱导苹果用户对“normal(普通)”字体尺寸的印象。这对于使用任何方式指定字体尺寸的 Web 开发人员来说都是一个问题,但是对于采用相对量度来指定字体尺寸的 Web 开发人员来说这个问题尤为严重,因为当显示字体的尺寸与普通尺寸离的较远时,标准参考字体尺寸的一点差别都会被夸大很多。

采用相对字体尺寸的另外一个主要问题是基于浏览器默认字体尺寸的所有的尺寸计算都不是必须的,即使对于在 body 标签中指定的字体也是这种情况。相反,所有相对尺寸都是基于父元素的字体尺寸来计算的。这就会使事情变得很复杂,因为元素可以嵌套,而且通常会嵌套的很深。例如,你的一段文字可以位于一个 div 中的另一个 div 中的一个 table 的一个 cell 中。如果在每一级都使用相对量度来指定字体尺寸,那么相对量度可能会相互混合,导致字体尺寸比你所期望的要大的多或小的多。

对嵌套元素应用相对尺寸所产生的组合效果可能会导致相对字体尺寸难于使用,容易把人搞糊涂。最坏的情况是,不同的浏览器识别父元素的方式不同,因此以哪种字体尺寸作为相对尺寸的参考尺寸也会不同。通常,Netscape 4.x 是差别最大的浏览器,但是在当前的浏览器中依然还有非常多的不一致性会频繁地引起相对字体尺寸的问题。

当好心没有取得好的效果时

相对字体尺寸是一个非常伟大的想法,因为对于 Web 开发人员来说它同时解决了用户易用性和设计灵活性的问题。为了成功地使用相对字体尺寸来设置字体,你需要非常细心地计划你的页面设计和 CSS 样式,以避免嵌套元素所带来的潜在问题。你可以做到这一点,但是事实并不像你想象地那么容易,而且它还对你的设计选项强加了相当大的限制。否则,你需要依赖关键字或者绝对量度来设置字体尺寸。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有