前端开发

 首页 > 前端开发 > css教程 > CSS中font-size属性及其em值的使用

CSS中font-size属性及其em值的使用

分享到:
【字体:
导读:
          本教程讲解CSS中font-size属性及其em值的使用 定义和用法 font-size 属性可设置字体的尺寸。 说明 该属性设置元素的字体大小。注意,实际上它设置的是字体中字符框的高度;实际的字符字...

本教程讲解CSS中font-size属性及其em值的使用

定义和用法
font-size 属性可设置字体的尺寸。
说明
该属性设置元素的字体大小。注意,实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮)。
各关键字对应的字体必须比一个最小关键字相应字体要高,并且要小于下一个最大关键字对应的字体。
可能的值
201585182806568.jpg (725×292)

实例
设置不同的 HTML 元素的尺寸:

XML/HTML Code复制内容到剪贴板

h1 {font-size:250%;}   
h2 {font-size:200%;}   
p {font-size:100%}

关于em值的使用问题
用ctrl键加鼠标滚轮将页面放大,会带来一个算是小小的BUG,就是假设页面没有滚动条,从而会出现滚动条,而通过font-size可以解决这个小BUG,从而提升用户体验。
浏览器一般的默认字体大小是16px,16px=1em,这样换算的话,1px=0.0625,因此如果我们要给字体设置12px的大小,则为0.75em,依次类推要设置的字体大小em值为0.0625*目标px大小值,注意em值会继承父级的字号值。但实际上如果百分比和em配合会更强大,更方便。
浏览器默认的字体大小为16px,这样的话16px=100%,那么1px=6.25%,10px=62.5%,因此如果我们在body里面定义font-size:62.5%,则浏览器默认的字体大小就是10px,上面我们说过em会继承,所以此时10px=1em,所以12px=1.2pm,16px=1.6pm,这样的话是不是在定义字体em单位的大小值就简单多了,但是要注意的是ie下因为解析问题,body在定义字体大小的时候应该为63%。
最后总结,如果需要给页面定义em单位的值,首先在body里面定义font-size:62.5%,为了兼容在ie浏览器下需要写成font-size:63%,然后在设置大小的时候,字体的大小除以10就是em值。


分享到:
CSS3中animation属性的使用详解
在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是”Keyframes”,我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生。下面我们就一起来看看这个“Keyframes”是什么东西。前面我们在使用transition制作一个简单的transition效果时,我们包括了初始属性和最终属性,一个开始执行动作时间和...
CSS3 经典教程系列:CSS3 圆角(border-r...
  现在有了 CSS3 的 border-radius 特性之后,实现边框圆角效果就非常简单了,而且其还有多个优点:一是减少网站维护工作量;二是提高了网站的性能,少了对图片的 HTTP 的请求,网页载入速度将变快;三是增加视觉美观性。   既然 border-radius 有这么多好处,我们就从他的语法,属性和属性值等方面来看其如何应...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……