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

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

1
回复
1638
查看
[复制链接]

2

主题

0

帖子

46

积分

球球发

体验VIP

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

积分
46
发表于 19-4-7 13:38:56 | 显示全部楼层 |阅读模式         
  定义和用法
, L' n& |" U) P
6 {# Z' }$ ^, W# S* T+ d  font-size 属性可设置字体的尺寸。
; w4 `0 O- ?/ }
! t3 T2 U3 J1 Y( U  说明/ B6 k- `  q( @0 |: F/ j. l: j

6 ?" `# n" ~0 E- r" |, X. r, N  该属性设置元素的字体大小。注意,实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮)。/ g+ N, V. X4 Q/ ~0 g  w
( h) J1 U) b7 ]9 \; ~% l  X# \. c# C
  各关键字对应的字体必须比一个最小关键字相应字体要高,并且要小于下一个最大关键字对应的字体。6 F4 I# W/ \) N# ~  v3 @% y

3 f) U5 y2 z% ?" Z* c. d; h2 g  可能的值
+ |; `* y# ?% ]8 {/ e/ j8 j+ `7 R2 ?
ZzCI9Eseqe0L0qEe.jpg ; J  O5 g4 S# G8 [! m7 d
  实例
4 v- U' j3 r! E. O) z5 }1 x# m! S4 J4 [2 E
  设置不同的 HTML 元素的尺寸:" b' ^' {8 q* ?" G. X
' Q( K4 W' K6 a# s$ m) g  T% x/ O
  XML/HTML Code复制内容到剪贴板( W+ h  K1 E8 s1 \* q
  1.   E1 G8 h9 i- O# {1 [
  2.   h1 {font-size:250%;}
    . Q/ X7 t  `, O* j5 v% }5 g
  3. ( m' a+ c% \$ V, m* A3 W
  4.   h2 {font-size:200%;}
    / q* Y3 }% z8 d
  5. $ `  C% p8 R8 R
  6.   p {font-size:100%}
复制代码

$ V7 R  w6 p( u, e$ a! T  e
9 h& H* j6 S& Y  关于em值的使用问题
; j0 o! M7 Q3 v& F8 t
9 p. n, Z2 k/ k: W# \$ B. Y" S. D% o  用ctrl键加鼠标滚轮将页面放大,会带来一个算是小小的BUG,就是假设页面没有滚动条,从而会出现滚动条,而通过font-size可以解决这个小BUG,从而提升用户体验。
  @: Q4 T$ o) n9 d& _2 [% f
+ r& g" t- v- z8 Q  浏览器一般的默认字体大小是16px,16px=1em,这样换算的话,1px=0.0625,因此如果我们要给字体设置12px的大小,则为0.75em,依次类推要设置的字体大小em值为0.0625*目标px大小值,注意em值会继承父级的字号值。但实际上如果百分比和em配合会更强大,更方便。
- P- _- |! U1 I) Y' e0 x2 A6 w: I2 q9 V% f! ^( ^5 a
  浏览器默认的字体大小为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%。
) D+ @  k& a' v9 D
/ a5 h' v% X  `+ v  最后总结,如果需要给页面定义em单位的值,首先在body里面定义font-size:62.5%,为了兼容在ie浏览器下需要写成font-size:63%,然后在设置大小的时候,字体的大小除以10就是em值。

0

主题

13

帖子

20

积分

1°伸手党

Rank: 2

积分
20
发表于 20-4-3 13:38:10 | 显示全部楼层         
真是 收益 匪浅
回复

使用道具 举报

网站简介

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