您的位置：首页 > Web前端 > CSS

CSS样式中字体大小，建议font-size使用em

2017-06-29 16:59 387 查看

转自：http://blog.csdn.net/u010874036/article/details/51582241

在如今这个提倡可用性设计以及用户体验设计的网络时代，CSS也是要一同参与其中的。大部分人在CSS代码编写中总是先对整体定义字体尺寸，中文情况下一般为12px，而其实这样以来在通过IE顶部菜单中的“察看-文字大小”设置已无任何作用。对字体感觉太小的浏览者而言无疑是种很不好的用户体验过程。其实这一切都可以避免，那就是使用em单位作为字体显示单位。

浏览器的默认字体高都是16px，所以未经调整的浏览器在显示1em=16px。换算过来的话也就是说1px=0.0625em，也就是12px=0.75em, 10px=0.625em，通过1px=0.0625em大家可以在CSS编写时通过px转换成em。不过还有一种更方便的方法，继续往下看！

这种方法要用到%单位（仅1次），其实%和em简单的话可以理解成前者只是比后者多2个0。为了简化font-size的换算，大家可以在css中的body中先全局声明font-size=62.5%，这里的%的算法和em一样，100%=16px，1px=6.25%，10px=62.5%，也就是定义了默认字体大小为10px。很多初学者可能会在此定义0.625em或者直接定义12px，这是没有效果的，一定要定义font-size=62.5%！由于em具有会继承父级出血元素的字体大小的特点，这是的1em=10px，所以12px=1.2em。px与em的转换通过除以10就可以得来，很方便了吧！

此外有一点必须要注意，可能是IE处理汉字时，对于浮点的取值精确度有限，在body下62.5%出来的12px字体比直接定义的要大一点点，只要将62.5%换成63%就可以了。通过以上对CSS代码的调整，你会发现自己的网站又向用户体验设计更靠近了一步，在如今这个提倡可用性设计以及用户体验设计的网络时代这是很重要的。

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">



<head>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



<title>脚本之家测试</title>



<style type="text/css" >



body{



font-size:63%;



}



</style>



</head>



<body>



<p style="font-size:1.2em;">font-size:1.2em 脚本之家 (可以调整)</p>



<p style="font-size:12px;">font-size:12px 脚本之家 (不能调整)</p>



<p style="font-size:1.2em; color:#F90;">你可以通过IE顶部菜单中的“查看-文字大小“来调整字体显示尺寸</p>



</body>



</html>

CSS中定义的长度单位有两种，相对长度和绝对长度。相对长度单位主要有：

* em (em，元素的字体的高度)

* ex (x-height，字母 "x" 的高度)

* px (像素，相对于屏幕的分辨率)

绝对长度单位主要有：

* in (英寸，1英寸=2.54厘米)

* cm (厘米，1厘米=10毫米)

* mm (米)

* pt (点，1点=1/72英寸)

* pc (帕，1帕=12点)

使用px和em主要优缺点如下：

1. IE无法调整那些使用px作为单位的字体大小，而firefox能够调整使用px和em作为单位的字体；

2. 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合： 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明 Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

em有如下特点：

1. em的值并不是固定的；

2. em会继续父级元素的字体大小。

所以我们在写CSS的时候，需要注重两点：

1. body选择器中声明Font-size=62.5%；

2. 将你的原来的px数值除以10，然后换上em作为单位；
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在id为#content的div中声明了字体大小为1.2em，那么在声明div中的p标签的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继续#content的字体高而变为了1em=12px。那么我们假设要设置p的字体为22px,这个时候就需要22除以12来得到em的值了,这就是em会继续父级元素的字体大小的特性.

但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用 12px定义的字体大小，而是稍大一点。这个问题已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。不知道有没有其他的解释。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： em font-size

相关文章推荐

新的分享

章节导航