当前位置: 网站建设 > 网页设计 > 建站经验 >

详解CSS网页设计中字体大小(em)的问题

时间:2013-03-02 04:15来源:未知 作者:admin 点击:

标签:详解CSS网页设计中字体大小(em)的问题 为了(4)CSS(823)大小(6)详解(47)网页设计(881)字体(24)问题(68)不能(7)调整(5)
为了IE下不能调整以px为单位的字体大小,而非IE下可以的问题,YUI CSS Tools采用了如下代码来设置默认1em的大小,支持用户的字体大小调整: 为此IE默认情形下,1em的大小是13.3333px,所以你会看到YUI CSS Grids里面那些诸如width:73.076em;这样的值。 设置默认字体大小为10px: body{font-size:62.5%;} #wrapper{width:97.4em;} 这便于顺次盘算出其余元素的长宽值,比如某个容器#wrapper的宽度是974px,CS
详解CSS网页设计中字体大小(em)的问题》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/030234YR013.htm

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

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

设置默认字体大小为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就会碰到此类麻烦,详解CSS网页布局中默认字体样式。实在第一种办法也会遇到类似麻烦,只不外比第二种少些。

寰球范畴内IE6已经不到40% 了,中国用户比率应当高些,但趋势是一样的,究竟IE8都出Beta了,IE6会很快成为历史的。假如你是偏执狂,须要斟酌Firefox2跟Safari的话,或者设置body{font-size:10px;}是一个不错的措施,中国雅虎的首页就是应用相似原理。总之,是时候不必考虑基于字体大小(em)的设计了,特殊是针对IE6的解决计划。

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

--> [网站建设之]详解CSS网页设计中字体大小(em)的问题

在css中,详解CSS盒子模型,1个“em”定义为一种给定字体的font-size值。所以1em可能随元素的不同而不同,它会相对于父元素字体大小而转变。在常见浏览器下,默认字体的大小为16px。常见有两种方法来进行网页设计:

 

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

在网页设计中最主要的莫过于文字的显示了,字体大小直接影响着全部页面的雅观,本文就先容一下css中网页字体设计的问题,家喻户晓,在CSS中一种是相对长度单位,包含英寸(in)、厘米(cm)、毫米(mm)、点(pt)和派卡(pc)。另一种是绝对长度单位,包括em、ex和像素(px)。ex因为在实际利用中需要获取x大小,因阅读器对此处置方法十分毛糙而被摈弃(更多内容能够参考Eric A. Meyer的《CSS威望指南》),所以当初的网页设计中对大小间隔的把持应用的单位是em和px(当然还有百分数值,但它必需是相对另外一个值的),详解CSS的背景属性的设置方法

Tag:CSS   字体大小   em   CSS   字体大小   em  

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

基于字体大小的设计好处很显明,当用户调剂浏览器默认字体的大小时,详解CSS优先级规则的级别与细节,字体和页面会随之缩放,可能满意挺这种方法的人常说的一个长处就是弱视的人可以通过放大字体来看明白页面内容,加强了页面的可访问性。

基于字体大小(em)的设计页面带来的缩放后果有限,最早基于字体大小设计的门户网站应该就是Yahoo和MSN了,而实际上它们也仅仅是保障了高低缩放三级罢了,再多就乱掉了。
现在的站点越来越多的图文混排,图像的高度和宽度自身就是像素数。除非你通过CSS来把图片的大小设置为相应的em值,就像本站的Logo这样,否则图片是不会跟着文字变更而变化的。但是如果采取的是背景图片,那就根本上机关用尽了。所以实际上基于字体大小来做图文混排设计的网页需要对图像的设计是有相称严厉的请求的,即便如斯仍无奈完善解决,但庞杂度却回升不少。
基于字体大小的网页设计,将使长度变得的非常的不直观,导致设置一个宽度变得异常麻烦,YUI CSS Grids中阐明了这点。并且因为em会相对于父元素字体大小变化而变化的问题,导致图文混排的复杂设计时无比麻烦。特别是在风行适度设计和精确到像素的这个急躁时期。其实连Google和百度这种非常简略的首页都或多或少的利用px来布局。
现在主流浏览器都支持了“全网页缩放”功能,Safari尚未支持这个功效,而是像Firefox2一样支持文本缩放,然而存在讥讽象征的是Apple页面基础上都是基于px的,所以一缩放就乱掉,我坚信Safari支撑这个功能仅仅是时光问题。两年前有篇《95%的中国网站需要重写CSS》很风行,固然保证用户的可拜访性是应该的,详解CSS中的绝对定位,但是应该找到其最佳实现的方式,毫无疑难浏览器的“全页面缩放”功能是最佳抉择。从现在开端,基于px的设计不用再过于背负违反可用性的恶名了,基于em(文字大小)的设计不能给咱们带来太多的利益,反而有可能消耗太多的精神挣扎于如何准确维护视觉设计上,设计师的精力应该更多的放在内容的懂得、疾速浮现、语义化、对屏幕浏览器的支持等等方面上。


(责任编辑:网站建设)
详解CSS网页设计中字体大小(em)的问题相关文章
上一篇:详解CSS网页布局中默认字体样式 下一篇:详解CSS背景Background属性
回到顶部