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

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

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

2

主题

0

帖子

46

积分

球球发

体验VIP

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

积分
46
发表于 19-4-7 13:38:56 | 显示全部楼层 |阅读模式         
  定义和用法! T" o8 o( K# `% [+ t6 v
: |/ _+ a( W$ {" U* Y9 u1 }
  font-size 属性可设置字体的尺寸。
( l2 J: c7 b8 `8 i& V, W7 o8 _
) O5 x# c' ]0 V& X* o$ N/ n; t$ [  说明, g7 ?" l8 f5 l$ U2 E

0 Q+ @; g0 j9 Y( X9 \  该属性设置元素的字体大小。注意,实际上它设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮)。
+ E" s, l- T6 W) D0 O5 I8 X' `; A/ O: _; G0 a% |' Q
  各关键字对应的字体必须比一个最小关键字相应字体要高,并且要小于下一个最大关键字对应的字体。
$ m7 P: z# t& _+ D# h
# u% i$ @5 }- l2 U  可能的值0 F0 D6 Q4 }. Q4 x" f# H
8 P4 ]$ J0 @- p! I- m3 K7 k3 n- E' _
ZzCI9Eseqe0L0qEe.jpg
6 x/ {; ]( a0 s/ n  实例
1 _. K# o# ]. B9 F  y# ]) f
( d/ \$ P- z, O2 w# W  设置不同的 HTML 元素的尺寸:3 G! ^: T0 A4 M2 `  {8 c" J3 C
8 v7 d: G. A& P! I9 s0 p
  XML/HTML Code复制内容到剪贴板
4 J3 |  [0 P4 O8 d! Q4 ~1 t
  1. " Z$ ^+ V2 H& e0 x( o; w
  2.   h1 {font-size:250%;}. s/ O5 C7 Z  r  T2 g

  3. ( t: o' ^% P! j5 U1 {
  4.   h2 {font-size:200%;}
    0 j# Q" a9 X" X: u
  5. 4 `  s5 I$ b2 c8 q0 n
  6.   p {font-size:100%}
复制代码

3 ~, E  o& w4 b' l/ ~; C& f6 X2 U$ A9 U6 |; \  \) m2 L. L! i% T: r
  关于em值的使用问题$ C4 X# z& `' ?" U, q
0 x2 [5 B% g# h+ L1 Z- M/ s, ?
  用ctrl键加鼠标滚轮将页面放大,会带来一个算是小小的BUG,就是假设页面没有滚动条,从而会出现滚动条,而通过font-size可以解决这个小BUG,从而提升用户体验。
) a9 M! j3 l6 L( `/ x" i
3 w3 x! ~9 o2 a) T' w8 J& W  浏览器一般的默认字体大小是16px,16px=1em,这样换算的话,1px=0.0625,因此如果我们要给字体设置12px的大小,则为0.75em,依次类推要设置的字体大小em值为0.0625*目标px大小值,注意em值会继承父级的字号值。但实际上如果百分比和em配合会更强大,更方便。
( b7 J8 ~' }( p# T# X
& f- l& g: O& 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%。
) B/ X! S6 J2 s5 Q! o1 u* Q+ O  @" K) F/ j! C2 z5 Y- [
  最后总结,如果需要给页面定义em单位的值,首先在body里面定义font-size:62.5%,为了兼容在ie浏览器下需要写成font-size:63%,然后在设置大小的时候,字体的大小除以10就是em值。
网站简介

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