• :在线测试工具暂时不可用,小伙伴们可以使用本地编辑器来代替,绿叶全新版本正在快马加鞭开发中,比心~

3.3 字体大小font-size

一、font-size属性

在CSS中,使用font-size属性来定义字体大小。

语法:

font-size:关键字/像素值;

说明:

font-size的属性值可以有两种方式,一种是使用关键字,如表1;二是使用像素做单位的数值。

二、font-size属性值

1、采用关键字为单位

表1 font-size属性值
font-size属性值 说明
xx-small 最小
x-small 较小
small
medium 默认值,正常
large
x-large 较大
xx-large 最大

这些都是相对浏览器默认情况下而言。对于这些属性值,我们完全不需要记忆,大家一定要记住喔。因为我们在实际开发中,比较少使用这种方式来表达字体大小,一般都是采用像素作为单位的数值。之所以给大家讲一下,就是让大家了解一下,以免以后看到别人写的代码看不懂。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>font-size属性</title>
    <style type="text/css">
        #p1{font-size:small;}
        #p2{ font-size:medium;}
        #p3{ font-size:large;}
    </style>
</head>
<body>
    <p id="p1">字体大小为“small(小)”</p>
    <p id="p2">字体大小为“medium(正常)”</p>
    <p id="p3">字体大小为“large(大)”</p>
</body>
</html>

在浏览器预览效果如下:

font-size属性

2、采用px为单位

在中国的大部分主流网站如新浪、网易等中,大部分都是采用px为单位。

(1)什么叫px?

px,全称“pixel”(像素)。px就是一张图片中最小的点,或者是计算机屏幕最小的点。

举个例子,下面有一个新浪图标:

font-size属性以px为单位

将这个图标放大n倍如下:

font-size属性以px为单位

你会发现,原来一张图片是由很多的小方点组成的,每一个小方点其实就是我们常常所说的一个像素(px)。一台计算机的分辨率是800px×600px指的就是“计算机宽是800个小方点,高是600个小方点”。

px是一个相对单位,它是相对显示器屏幕分辨率而言的。例如windows系统的分辨率为每英寸96px,mac系统的分辨率为每英寸72px。

对于初学者来说,1px可以看出一个小点,多少px就可以看成多少个小点组成。我们经过CSS入门的锤炼,很快就能掌握像素px这个概念了。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>font-size属性</title>
    <style type="text/css">
        #p1{font-size:10px;}
        #p2{ font-size: 15px; }
        #p3{ font-size:20px;}
    </style>
</head>
<body>
    <p id="p1">字体大小为10px</p>
    <p id="p2">字体大小为15px</p>
    <p id="p3">字体大小为20px</p>
</body>
</html>

在浏览器预览效果如下:

CSS font-size属性

稍微了解过CSS的朋友都会觉察到,font-size的单位不仅仅只有px,还有em、百分比等等。对于初学者来说,我们仅仅掌握以px单位就行了,如果讲解太多,会导致记忆混乱。

如果有一定基础,想更深入的了解CSS单位,请关注我们即将上线的CSS进阶教程。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取学习资源以及配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:519225291(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部