`
jinghuainfo
  • 浏览: 1527676 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

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>


 

文章引用自: http://yeren203.spaces.live.com/
分享到:
评论

相关推荐

    知识普及:彻底搞懂CSS中单位px和em,rem的区别

    1. IE无法调整那些使用px作为单位的字体大小; 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位; 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。 px像素(Pixel...

    搞清楚CSS中单位px与em之间的关系和特点

    我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大。平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用。因为 1、IE无法调整那些使用px作为单位的字体大小...

    CSS中单位px与em的区别(推荐)

    用px来定义字体,无法用浏览器字体放大功能,而国外大多数网站可以在IE浏览器中使用。 原因:  1.IE无法调整px为单位的字体大小。  2.国外大部分使用em为字体单位。 px,em都为相对长度单位,  px是相对于显示器...

    css中em px 区别你真的了解吗

    之前听人说过,网站制作中字体单位应该用em而不用px,原因简单来说就是支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应。px是绝对单位,不支持IE的缩放,em是相对单位。 首先了解一下em是...

    CSS的em、px、pt长度单位转换示例

    在IE6.0字体设定为中的时候,如果字体未做任何CSS设定或者元素的设定,默认的字体是12pt,或者16px,或者1em,或者font size=3。em、px、pt的换算关系如下: 1em=16px 1em=12pt 1px=1/16 em=0.0625em 1px=3/4 pt=...

    CSS 中px、em、rem、%、vw、vh单位之间的区别详解

    字体大小同样都是1.5em,但是效果却截然不同,按照W3C提供的公式,我们可以计算下: class为id1的div字体大小继承自父元素body:16px*1.5em = 24px class为id2的div字体大小继承自父元素id1:24px*1.5em = 36px ...

    Web前端与移动开发之css字体属性.txt

    normal正常/bold粗体/bolder特粗/lighter细体/number数字加粗 无单位 实际开发中更提倡使用数字加粗 400(不加粗)等同于normal 700(加粗)等同于bold 注意这个数字后不跟单位 4.font-style 字体样式 normal...

    postcss-pxtorem:使用PostCSS将像素单位转换为rem(根em)单位

    使用默认设置,仅定位与字体相关的属性。 / / input h1 { margin : 0 0 20px; font - size : 32px; line-height : 1.2; letter - spacing : 1px; } / / output h1 { margin : 0 0 20px; font - size : 2rem; ...

    学习CSS了解单位em和px的区别

    我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大。平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用。因为 1. IE无法调整那些使用px作为单位的字体大小;...

    css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况

    em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。 rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算...

    css中的px、em、rem、pt 特点和区别及换算详解

    2、em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。通常1em=16px。 3、pt (point,磅):...

    CSS 字体单位em简介

    刚学网页制作的时候,老师曾经告诉我必须用CSS强制定义字体大小,否则保证每个人都看到一致的效果。这一点在现在的中国站点尤为明显。包括网易、搜狐这些门户网站在内的大部分站点,用的都是绝对单位px(像素)。...

    CSS中px em rem区别与使用

    最近在学习字体时遇到字体大小的设置,font-size单位可以是px或em或rem,那么这几种单位都有什么区别呢,该如何使用呢? px是像素图像的基本采样单位,相对于显示器屏幕分辨率而已的,什么是一个像素呢,你把一张图...

    浅析CSS中单位px、rem、em、vh、vw之间的区别

    rem 与 px 的计算关系 rem的值是px的倍数 默认情况下font-size = 16px,那么1rem = 16px rem 如何修改与px的相对计算关系 我们可以在并且只能在html标签(因为html节点是根节点,就是rem里面的r:root)里面修改font-...

    HTML5&CSS3网页制作:字体样式属性.pptx

    为了更方便的控制网页中各种各样的字体,CSS提供了一系列的字体样式属性。 6 @font-face属性用于定义服务器字体。 7 word-wrap属性用于长单词和URL地址的自动换行 1 font-size属性用于设置字号。 2 font-family属性...

    详解CSS3 rem(设置字体大小) 教程

    在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。...

    css中px、em和rem的区别总结

    em 和 rem 都是灵活可扩展的单位,由浏览器转换为像素值,取决于设计中的字体大小,如果使用值 1em 或 1rem ,它可以被浏览器转换为从 16px 到 160px 或其他任意值。浏览器使用 1px ,那么 1px 始终显示为完全 1px。...

    CSS Font-Size: em、px 、pt 、Percent之间的关系及换算

    1、“Ems”: em,大小不固定 ,成为相对单位(body则相对浏览器的默认字体设置,子集相对父级), 浏览器默认设置字体大小为16px , 则1em = 16px , 且其可扩展,2em = 32px , 目前常用的字体大小px换算成em , 16px =...

Global site tag (gtag.js) - Google Analytics