web前端——合理的设置字体大小

我想大家在做html页面的时候都会遇到过面对字体大小无从下手的尴尬吧，似乎如何使用字体大小这么个细节也许就成了我们设计上的一些瑕疵，失误。或许我们也似乎从未往这方面注意过，或者离队字体大小也是测试一下，看着顺眼就ok，拿去就用了吧！我想向大家分享一下我对这方面的几种看法，欢迎大家指正！

NO.1使用em

在我的一些网页设计中对字体的设置很少有看到pt或者px类的单位，我想使用百分比或者相对的方式比较好，首先我想我们应该在body里面设置一个字体为百分比的单位，然后再在下文使用em值，这样能够避免很多的麻烦，而且带来的好处也是显而易见的：①能够避免当我们设计流动布局时习惯性的把字体设置为固定显示值；②字体的一致性，和相对性，能够突出显示我们想要表达的内容；所以说是个很不错的解决我们不能够准确的把握字体大小显示的方案。有代码有真相：

1 body

2 {

3 font-size:76%; /*将body里面的字体大小值设置为百分数*/

4 }

5

6 p

7 {

8 font-size:1em; /*接下来我们可以随意的用em给字体赋值*/

9 }

不过在下提醒大家，不要把字体大小设置为1em以下，因为如果按照我刚才列出来的那个，文字大小大约会是在12像素左右（浏览器默认的字体大小为16像素）。这对于很多网民都是一个舒适的字体，技能看清也不拥挤。这个解决方案的缺点在于它假设了所有的浏览器都使用的是16像素的默认值，尽管大多数浏览器都是这样的值，但如果用户改变了这个默认设置，我们就悲催了....

NO.2使用关键字

在使用关键字时，最容易出现问题的浏览器是IE6以下的版本（不包含IE6，不过现在windows系统都绑定了IE6了），所以我们可以放心的使用关键字了，有代码有真相：

1 body{

2 font-size:small;

3 }

一般我们有选择的是“xx-small，x-small，small，medium，large，x-large，xx-larg，smaller，larger”这些关键字，再来个有图有真相：



这样以来，我们就能够方便的控制这些个字体的大小，更妙的是，这些字体的大小间隔缩放的比例为1.2

NO.3使用样式切换方法

这个方法我们感觉可能复杂一点了，让用户可以自己来切换，这样对用户体验来说大大提高，对于某些浏览器来说，切换样式是内置的，但这类浏览器中却并没有IE的身影。所以为了可让用户可以切换文字的大小，在页面中我们必须加入相应的控制脚本。

到这里有些朋友可能早就按耐不住想要质疑我为什么不用px呢？那我就告诉你，你看到IE中的那个查看的了没？不能控制页面中用px的字体大小，因为这个是主流浏览器，我们一定要考虑到用户的感受，一般的企业网站就不用了，你直接定一个大小就是了（不是不负责任，而是面对的用户群体不一样）。好了，就写到这里吧！

（喜欢学习的和想与我探讨各种web知识的留下你的邮箱或联系方式，或者跟我发邮件747850255@qq.com转载请自觉附上转载地址，来自博客园“明年开奥迪”)