css怎么设置字体大小


本文摘自PHP中文网,作者青灯夜游,侵删。

在css中,可以通过font-size属性来设置字体大小,语法格式为“font-size:值;”。该属性的值可以是“small”、“large”、“smaller”、“larger”等关键字;也可是加px、em、rem、%单位的数值。

本文操作环境:宏基S40-51、CSS3&&HTML5&&HBuilderX.3.0.5版、Windows10 家庭中文版

(学习视频分享:css视频教程)

在CSS中,可以使用font-size属性来调整字体大小;font-size属性用于设置字体大小。如果一个元素没有显式定义font-size属性,则会自动继承父元素的 font-size属性的计算结果。

注意,实际上font-size属性设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮)。

可以设置的属性值:

1.png

示例1:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <style type="text/css">

            /* font-size属性设置字体大小--“数字+长度值”

            */

            .length1 {

                font-size: 20px;

                /*

                px,像素,它是 CSS 中最常用的长度单位,可以用来指定字体大小,元素的宽度、高度、边框、内边距,外边距的大小等等,

                它是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI

                 

                px 单位的值必须是整数值

                 */

            }

         

            .length2 {

                font-size: 2em;

                /* em

                相对长度单位,取决于目标元素字体尺寸。

                em 单位的值等于基本元素或父元素的字体大小。

                */

            }

             

            .length3 {

                font-size: 2rem;

                /* rem

                CSS3中加入的 相对长度单位,

                取决于文档根元素(通常为:root)的字体尺寸,适用于依据字体尺寸进行的排版,适用于自适应。 */

            }

            .length4{

                font-size:200%;

                /* 相对于父元素的尺寸的取值,

                实际使用中,如果父元素是一个非稳定的取值,可能会导致父元素被撑开,

                而实际值取决于其祖先元素中最近的一个拥有稳定取值的元素。整数取值,并不适用于解决自适应问题。 */

            }

        </style>

    </head>

    <body>

        <p>这是测试段落</p>

        <p class="length1">这是测试段落</p>

        <p class="length2">这是测试段落</p>

        <p class="length3">这是测试段落</p>

        <p class="length4">这是测试段落</p>

    </body>

</html>

效果图:

1.png

示例2:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!DOCTYPE html>

<html>

    <head>

        <style type="text/css">

            /* font-size属性设置字体大小--相对大小值 */

            .larger {

                font-size: larger;

                /* 把 font-size 设置为比父元素更大的尺寸。 */

            }

 

            .smaller {

                font-size: smaller;

                /* 把 font-size 设置为比父元素更小的尺寸。 */

            }

 

        </style>

    </head>

 

    <body>

         

        <p>这是测试段落</p>

        <p class="larger">这是测试段落</p>

        <p class="smaller">这是测试段落</p>

    </body>

 

</html>

效果图:

2.png

示例3:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<!DOCTYPE html>

<html>

    <head>

        <style type="text/css">

 

           /*font-size属性设置字体大小--绝对大小值*/

            .xx-small {font-size: xx-small;}

            .x-small {font-size: x-small;}

            .small {font-size: small;}

            .medium {font-size: medium;}

            .large {font-size: large;}

            .x-large {font-size: x-large;}

            .xx-large {font-size: xx-large;}

        </style>

    </head>

 

    <body>   

         

        <p>这是测试段落</p>

        <p class="medium">这是测试段落</p>

        <p class="xx-small">这是测试段落</p>

        <p class="x-small">这是测试段落</p>

        <p class="small">这是测试段落</p>

         

        <p class="large">这是测试段落</p>

        <p class="x-large">这是测试段落</p>

        <p class="xx-large">这是测试段落</p>

    </body>

 

</html>

效果图:

3.png

更多编程相关知识,请访问:编程入门!!

以上就是css怎么设置字体大小的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

不能忘却的悼念:将网页背景变为黑白色调教程

css如何使用伪元素

css是什么的缩写

css如何设置表格边框间的距离?border-spacing属性的使用

css怎么设置字体颜色

网站对联广告js代码分享

css选择器怎么选取第几个元素

css如何实现表单label的两端对齐(代码示例)

html如何用css美化表格

你一定要知道的css属性值规范

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...