0 Comments

相对和绝对的字体尺寸单位

发布于:2013-03-19  |   作者:广州网站建设  |   已聚集:人围观

相对和绝对的字体尺寸单位

也许数字化排版最不同的特点就是用户能够根据自己的偏好调整字体大小。当选择了一个字体大小后,网站开发者可以绝对或是相对的度量单位,也可以在CSS 中设置。总的来说,绝对单位更适合印刷品的设计,把它们用于网站排版不是很好的实践。唯一的例外是打印样式表,绝对单位可以帮助定义文档上设计区域的大小。目前被支持的度量单位包括pt、pc、cm、mm 和in。但是像xx-small、x-small、 small、medium、large、 x-large 和 xx-large,也同样可以选择。

设定“绝对”的字体大小并不意味着用户不能增加或减少字体的大小;现代浏览器允许大量针对文本的操作。甚至,绝对单位使设计者在父元素和子元素之间设定比例变成了不可能的事情,即使用户手动地增加或减少字体的大小,字体的大小也会不变。因此,“absolute”属性与样式表中元素的定义相关,而与屏幕显示无关。

现代浏览器会默认把<body> 元素的字体大小设定为16px。如果你不在样式表中明确地指定其他值,将会使用这个值。为了避免复杂的计算,Richard Rutter 建议把<body> 的字体大小设为62.5%,这将把文字的大小降低到10px(16px×0.625)。相应地,当把标题字体大小设定为18px 时,使用1.8em,而不使用1.125em(18px : 16px = 1.125)更合适一些。

实际上,字体大小通常使用相对单位,比如px、em 或%。像素(px)与显示器的分辨率相关。分辨率越高,像素密度越大。通常这也意味着字体看上去会更小。

“em”是通过你使用的字体大小来定义的度量单位。

它代表了基线(baseline)之间的距离,当字体属性被设定为solid(不含行高)时。em 是一个相对的单位,它的值一般是文本元素父元素大小的倍数。所以,1em 对于16 点(point)的字体而言,意味着16 点。如果用户浏览器默认的字体大小是16 像素,那么1em 就代表16 像素,这是基本是仅仅是文本显示尺寸的一个属性值。如果用户把字体尺寸降低到14 像素,那么2em 将代表28 像素。

使用em作为字体大小单位的好处是,这个度量单位在设定父元素和子元素的比例方面天生的能力,以及对CSS 继承特性的利用。利用这个特性子元素可以继承父元素的大小,除非明确声明了进行尺寸更改。 比如,如果默认字体大小是16 像素,<body> 元素的字体大小为2em,<body> 之内的页眉字体大小为1.5em,那么页眉的字体大小将是<body> 元素的1.5 倍,也就是1.5×2×16px=48px。

在某种程度上,百分比近似于em 值:CSS 中文档的根、继承和父子元素的相对关系会为每一个元素定义大小。所以,在上面的例子中,可以定义<body> 元素的字体大小为200%,页眉的字体大小为150%;结果是相同的(48px)。

在一些环境中,最小宽度和最大宽度属性设置为em或百分比对于获得一个可读性好的行宽会很有帮助。通常,字符的平均宽度是2/3 em。因此30em和50em可以被视为理想的行宽。

因为IE6 不允许用户按像素缩放文本,建议使用em或百分比值。不过,当使用相对单位时要小心谨慎。使用一些尺度和分级(参考下文)来确保不同重量的文本元素能够准确、恰当地呈现。

其他相对度量单位在实践中很少被使用:虽然被广泛支持,“ex”和“smaller”、“larger”(它们把字体大小降低和增加1.2em)关键字从来不会在样式表中被大量使用。同样,点(point)在印刷中很有用,但是也不会被用在屏幕上。人们的浏览器也许默认设置会略微不同,这可能会对版式产生副作用。为了确保独立于浏览器展示文本,使用CSS 全局重置,允许你在一个安全的独立于浏览器的环境,设置字体和设计网站的全部元素。有很多种CSS 重置样式表,从* { padding: 0; margin: 0: } 到比较长的那些,比如EricMeyer 的Reset Stylesheet 4,各不相同。



广州网站建设,网站建设,广州网页设计,广州网站设计
标签:
飞机