Go homepage(回首页)
Upload pictures (上传图片)
Write articles (发文字帖)

The author:(作者)归海一刀
published in(发表于) 2014/3/30 5:35:39
用em指定字体尺寸的问题和解决办法_[Html教程]

　有几种方法可以用来指定 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 样式，以避免嵌套元素所带来的潜在问题。你可以做到这一点，但是事实并不像你想象地那么容易，而且它还对你的设计选项强加了相当大的限制。否则，你需要依 赖关键字或者绝对量度来设置字体尺寸。


　
　
　
　
　

赞