css中字体单位px与em

简介:

css中字体单位px与em

px是固定大小单位称为像素,em是非固定大小单位称为相对单位字。在ie中px单位的文本的字号不随浏览器字号设置的改变而改变。浏览器字号的设置将改变默认em的大小。
例如:当ie文字大小为中时默认的1em相当于16px,当文字大小为较小时默认的1em相当于12px。
当em单位处于具有固定字号的对象中时,em将以此对象中的文字大小为基准单位
 
<div style="font-size:12px;">
12px字体<br /> <span style="font-size:1em; color:blue">12px字内的1em字</span><br /><span style="font-size:2em;color:red">12px字内的2em字</span><br /> </div>
<div style="font-size:13px;">13px字体</div>
<div style="font-size:14px;">14px字体</div>
<div style="font-size:16px;">16px字体</div>
<div style="font-size:1em">1em字体</div>
<div style="font-size:0.85em">0.85em字体<br />
<span style="font-size:1em; color:blue">0.85em字内的1em字</span><br />
<span style="font-size:2em; color:red">0.85em字内的2em字</span><br /> </div>
<div style="font-size:0.75em">0.75em字体<br />
<span style="font-size:14px; color:blue">0.75em字内的14px字</span><br /> <span style="font-size:12px;color:red">0.75em字内的12px字</span><br />
</div>
<div style="font-size:0.5em">0.5em字体</div>









本文转自 牛海彬 51CTO博客,原文链接:http://blog.51cto.com/newhappy/76869,如需转载请自行联系原作者
目录
相关文章
|
15天前
|
编解码 前端开发 UED
解密CSS单位:px、em、vh的区别与应用
解密CSS单位:px、em、vh的区别与应用
28 0
|
2月前
|
Web App开发 编解码 前端开发
告别固定字体大小:CSS使用相对单位提升网页可访问性和兼容性
在 Web 开发领域中,有很多误解流传,即使它们被反驳了很多次也仍然存在。"外部链接应该总是在新标签页中打开" 就是一个很好的例子。CSS Tricks 在将近十年前就对此进行了详细的解释(简而言之:大多数情况下是错误的),但它似乎仍然在某些角落中存在。
|
4月前
|
编解码 前端开发 小程序
CSS中rpx、px、em、rem、%、vh、vw各自都代表什么
CSS中rpx、px、em、rem、%、vh、vw各自都代表什么
42 0
|
2月前
|
前端开发
css中px和em的区别
css中px和em的区别
|
3月前
|
编解码 前端开发
CSS 的数值与单位px\em\%
CSS 的数值与单位px\em\%
|
3月前
|
前端开发
让页面里的字体变清晰,变细用CSS怎么做?
让页面里的字体变清晰,变细用CSS怎么做?
47 2
|
3月前
|
Web App开发 前端开发
CSS:字体和文本样式
CSS:字体和文本样式
39 0
|
3月前
|
编解码 前端开发
CSS中单位:【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
CSS中单位:【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
|
4月前
|
前端开发 JavaScript 容器
纯css实现高度或者宽度变化字体发生变化【容器查询】
纯css实现高度或者宽度变化字体发生变化【容器查询】
59 0
|
4月前
|
JavaScript 前端开发
CSS3 transform 字体模糊问题
CSS3 transform 字体模糊问题