点击这里给我发消息 点击这里给我发消息

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

添加时间:2011-8-31
    相关阅读: 网页设计 企业网站 企业网站 网页 设计 解决方案 方案

页面内容中最主要的就是文字,这些文字字体的大小我们要如何设置才算合理呢,我们来看一下作者是如何做的。

      NO.1使用em

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

body
 {
 font-size:76%;         /*将body里面的字体大小值设置为百分数*/
}
p
 {
font-size:1em;        /*接下来我们可以随意的用em给字体赋值*/
}
     不过在下提醒大家,不要把字体大小设置为1em以下,因为如果按照我刚才列出来的那个,文字大小大约会是在12像素左右(浏览器默认的字体大小为16像素)。这对于很多网民都是一个舒适的字体,技能看清也不拥挤。这个解决方案的缺点在于它假设了所有的浏览器都使用的是16像素的默认值,尽管大多数浏览器都是这样的值,但如果用户改变了这个默认设置,我们就悲催了....

     NO.2使用关键字

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

body{
 font-size:small;
}
     一般我们有选择的是“xx-small,x-small,small,medium,large,x-large,xx-larg,smaller,larger”这些关键字,再来个有图有真相:

这样以来,我们就能够方便的控制这些个字体的大小,更妙的是,这些字体的大小间隔缩放的比例为1.2
         NO.3使用样式切换方法

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

 

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

本文作者:未知
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册