繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS教程:建议font-size使用em
- CSS样式表
- CSS样式表定义标签li前面样式
- 符合标准的div css制作的弹出菜单
- CSS实现在文章每段后面加入带连接的隐藏文字
- CSS:浏览器特定选择器介绍
- WEB标准学习,认识两种网页声明的含义
- CSS样式表中继承关系的空格与不空格
- CSS框架的利与弊(下)
- 让广告代码不影响网页站打开速度
- CSS教程:position 绝对定位的问题
- 标签增加CSS的overflow属性来清除浮动
- 跨浏览器的CSS固定定位
- IE7对css选择器的改进
- IE7新支持的CSS属性和属性选择符
- CSS设计符合Web标准的网页表单的几个技巧
- HTML网页中无刷新的更换CSS样式
- CSS定义网页局部链接的技巧
- 关于学习DIV CSS的一些精妙问答
- 论web标准的网页制作和符合web标准的网站UI
- CSS学习者:2008年不要作浮躁的人
- 学习CSS布局网页的一些实例
CSS样式表 中的 CSS教程:建议font-size使用em
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-11 浏览: 128 ::
收藏到网摘: n/a
在如今这个提倡可用性设计以及用户体验设计的网络时代，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代码的调整，你会发现自己的网站又向用户体验设计更靠近了一步，在如今这个提倡可用性设计以及用户体验设计的网络时代这是很重要的。
<!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>
评论 (0) All
