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

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

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

2

主题

0

帖子

46

积分

球球发

体验VIP

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

积分
46
发表于 19-4-7 13:38:56 | 显示全部楼层 |阅读模式         
  定义和用法
" S2 i6 Q$ N! x, T1 v" N" ~1 D; F2 K' Q4 v! ~
  font-size 属性可设置字体的尺寸。6 v) l) l9 s- U3 z8 L8 U; t  H) U+ c  t
( A% d, Z6 o% v: M- ]0 Z
  说明6 O# n6 |) J% j+ _3 [6 ^

# [, x' |  Q, l9 F  该属性设置元素的字体大小。注意,实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮)。
' Y& E' V8 K6 {6 {, ^
2 K( G6 ]) J0 d- M  各关键字对应的字体必须比一个最小关键字相应字体要高,并且要小于下一个最大关键字对应的字体。& J  r7 O# B9 w, @6 r

6 R; ~% L$ V$ `& l; E  可能的值
& l1 c7 i& ], T% K1 j$ C: t
: U) }6 }' N; y/ E ZzCI9Eseqe0L0qEe.jpg 2 k. E+ J' v8 @* p. W: O$ w4 ~
  实例  d9 F4 Y8 e, p6 l
1 j4 X- h, q6 I' {1 j& U
  设置不同的 HTML 元素的尺寸:
6 R1 p2 G: T* t* y
) y% s2 p  @9 [$ X* x  XML/HTML Code复制内容到剪贴板! |7 R3 O! Z: v+ o  M9 a
  1. . G6 Z" V( o$ l4 O& U1 I+ Y
  2.   h1 {font-size:250%;}
    ) R) ~5 r0 _6 i# w6 `

  3. $ K+ c4 C! H9 x+ z$ N
  4.   h2 {font-size:200%;}
    + N2 Q9 |) K7 H! _: A, k( q- s
  5. ( v0 ]! z: o5 R4 c9 f
  6.   p {font-size:100%}
复制代码
/ T6 J% d0 K' v* [, a5 N4 N, t
3 f0 ?5 V4 ]% j5 X. h$ y
  关于em值的使用问题
# {- Z6 [. E( f1 A
+ O/ A# M3 `, i- k  用ctrl键加鼠标滚轮将页面放大,会带来一个算是小小的BUG,就是假设页面没有滚动条,从而会出现滚动条,而通过font-size可以解决这个小BUG,从而提升用户体验。
4 P4 @- k2 z& Z3 n4 {
. |$ V% c) ~+ E2 p3 E( v' ^  V3 r  浏览器一般的默认字体大小是16px,16px=1em,这样换算的话,1px=0.0625,因此如果我们要给字体设置12px的大小,则为0.75em,依次类推要设置的字体大小em值为0.0625*目标px大小值,注意em值会继承父级的字号值。但实际上如果百分比和em配合会更强大,更方便。
8 h5 C( O& A. U0 Y+ l
9 q$ \- Q& v- l8 H  浏览器默认的字体大小为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%。$ i# i* @- J6 Z
! d5 {; u3 U% G$ ~  j
  最后总结,如果需要给页面定义em单位的值,首先在body里面定义font-size:62.5%,为了兼容在ie浏览器下需要写成font-size:63%,然后在设置大小的时候,字体的大小除以10就是em值。
网站简介

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