腾讯云网站解决方案帮您轻松应对建站成本高/网络不稳等常见问题

[其他] CSS的font-size属性及其em值的使用

0
回复
591
查看
[复制链接]

2

主题

0

帖子

46

积分

体验VIP

Rank: 28Rank: 28Rank: 28Rank: 28Rank: 28Rank: 28Rank: 28

积分
46
        
发表于 19-4-7 13:38:56 | 显示全部楼层 |阅读模式
  定义和用法
5 e! V, _/ i  _
/ i# V3 B  g' i1 \9 }  v  font-size 属性可设置字体的尺寸。
- v! Z% [- d% b, ~0 }: o! k3 ~' g  S1 i7 ~
  说明" j+ c: U. V0 ~7 R  X

" i9 I1 J1 L4 a2 F- d  该属性设置元素的字体大小。注意,实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮)。
3 p7 b" Q/ e" @  Y' G9 e
3 \  H* ^4 z# B- A! g$ H: |; e$ E# b  各关键字对应的字体必须比一个最小关键字相应字体要高,并且要小于下一个最大关键字对应的字体。- g% u: T  o' |5 I) J! l) ?

+ j$ }, o- ?  R  可能的值
- s  H- a8 g3 F/ K7 q; n( q* z$ P& F; x9 h( D
* O  b3 [- e9 H
  实例, w- O& c- Z+ \, x& V+ p

. I8 V0 ^: K" F  Z+ Z4 m( f  设置不同的 HTML 元素的尺寸:) x: n; M( h" x4 R6 Z6 S& n" W

+ l) ]) P7 U2 g  XML/HTML Code复制内容到剪贴板
/ L' D* E- ^& \

  1. , ~. Z$ Z8 t* G4 L7 q
  2.   h1 {font-size:250%;}" ?& s, X7 n. l: {
  3. 1 X& R& n, a5 R6 u- t: t
  4.   h2 {font-size:200%;}# y/ r+ r7 G4 E2 [" f$ |- @& L$ N

  5. ; }8 V+ J. A+ d+ Z
  6.   p {font-size:100%}
复制代码

+ J; r( Q* f5 c* ~/ M. e7 X, I
5 X) p9 Y! Z$ J4 w0 f! ?9 m! A1 w  关于em值的使用问题1 v/ p( G" H" O4 ]9 u
; |/ L% \' k; y  b. _4 o" Q$ X
  用ctrl键加鼠标滚轮将页面放大,会带来一个算是小小的BUG,就是假设页面没有滚动条,从而会出现滚动条,而通过font-size可以解决这个小BUG,从而提升用户体验。
. y/ l$ ]4 G" U* h3 E0 y- _4 F+ x& s2 m7 u0 i* y5 L
  浏览器一般的默认字体大小是16px,16px=1em,这样换算的话,1px=0.0625,因此如果我们要给字体设置12px的大小,则为0.75em,依次类推要设置的字体大小em值为0.0625*目标px大小值,注意em值会继承父级的字号值。但实际上如果百分比和em配合会更强大,更方便。
1 t  [' u: A1 B! B
+ p# J9 n9 b) A) ^" ~% v  浏览器默认的字体大小为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%。- c9 d6 Z& T. J6 h) q2 @

& |. }6 D7 \0 @# I2 t' F  最后总结,如果需要给页面定义em单位的值,首先在body里面定义font-size:62.5%,为了兼容在ie浏览器下需要写成font-size:63%,然后在设置大小的时候,字体的大小除以10就是em值。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

qiuqiufa.com

网站简介

球球发,是一家 Discuz! 商业插件、风格模板、网站源码、 Discuz!运营维护技术等于一体的交流分享网站,全站95%的资源都是免费下载,对于资源我们是每天更新,每个亲测资源最新最全---球球发(如果我们有侵犯了您权益的资源请联系我们删除