CSS 字体单位em简介
发布时间：2009-12-27 16:37:33 作者：佚名 
我要评论
我要评论国外人士非常重视网站的易用性，相当一部分外国站点已经使用em作为字体单位.
刚学网页制作的时候，老师曾经告诉我必须用CSS强制定义字体大小，否则保证每个人都看到一致的效果。这一点在现在的中国站点尤为明显。包括网易、搜狐这些门户网站在内的大部分站点，用的都是绝对单位px（像素）。但是，如果从网站易用性方面考虑，字体大小应该是可变的，一些视力不是那么好的人需要放大字体才能看得清页面内容。然而，占据大部分浏览器市场的IE无法调整那些使用px作为单位的字体大小。国外人士非常重视网站的易用性，相当一部分外国站点已经使用em作为字体单位。
1em指的是一个字体的大小，它会继承父级元素的字体大小，因此并不是一个固定的值。任何浏览器的默认字体大小都是16px。因此，12px = 0.75em。实际应用中为了方便换算，通常会如下设置样式：
html { font-size: 62.5%; }
这样，1em = 10px。我们常用的1.2em理论上就是12px。但是，这个换算在IE浏览器下不成立，1.2em会比12px稍大一些，解决办法是把html标签样式中的62.5%改成63%，即：
html { font-size: 63%; }
在中文的文章中，一般会在段首空两格。如果用px作为单位，对12px字体来说需要空出24px，对14px字体来说需要空出28px……这样换算非常不通用。如果用上em单位，这个问题就很好解决了，1个字的大小就是1em，那两个字的大小就是2em。因此，只需这样定义就行了：
p { text-indent: 2em; }
1em指的是一个字体的大小，它会继承父级元素的字体大小，因此并不是一个固定的值。任何浏览器的默认字体大小都是16px。因此，12px = 0.75em。实际应用中为了方便换算，通常会如下设置样式：
html { font-size: 62.5%; }
这样，1em = 10px。我们常用的1.2em理论上就是12px。但是，这个换算在IE浏览器下不成立，1.2em会比12px稍大一些，解决办法是把html标签样式中的62.5%改成63%，即：
html { font-size: 63%; }
在中文的文章中，一般会在段首空两格。如果用px作为单位，对12px字体来说需要空出24px，对14px字体来说需要空出28px……这样换算非常不通用。如果用上em单位，这个问题就很好解决了，1个字的大小就是1em，那两个字的大小就是2em。因此，只需这样定义就行了：
p { text-indent: 2em; }
相关文章
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
这篇文章主要介绍了通过CSS3的object-fit来调整图片适配尺寸的技巧,包括用object-fit来居中并裁剪图片的方法,需要的朋友可以参考下2016-02-27- 这篇文章主要介绍了CSS计数器counter()的用法,是CSS入门学习中的基础知识,需要的朋友可以参考下2015-09-26
- 这篇文章主要介绍了CSS中的伪元素,是CSS入门学习中的基础知识,需要的朋友可以参考下2015-08-01
- 这篇文章主要介绍了CSS中的各种选择符,是CSS入门学习中的基础知识,需要的朋友可以参考下2015-07-17
- 这篇文章主要介绍了Markdown.css样式,用来实现显示强大的Markdown样式的文本,需要的朋友可以参考下2015-07-16
- CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局2014-05-03
定义css设备类型-Media Queries图表简介及使用方法
CSS3完美地解决了让同一个网站同时适应完全不同尺寸的屏幕这些问题;css3提出的MediaQueries解决了为网站设计不同的CSS样式文件，如打印样式表文件，手机样式文件，电脑样式2013-01-21css3背景图片透明叠加属性cross-fade简介及用法实例
据说iOS6系统(iPhone5)增加了两个CSS3属性，一个是CSS3 filters – CSS3滤镜另外一个是CSS3 Cross-fade – CSS3交叉淡入淡出,接下来为您介绍cross-fade属性，感兴趣的朋友2013-01-08- 本文主要介绍了通用的css hack2012-07-11
- CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生。这个被国内开发者昵称为CSS精灵 CSS雪碧的家伙到底解决了什么问题，我们又怎样合理使用这个技术呢?下面让我2012-05-31
最新评论