font-size属性
语法：
font-size：关键字/像素值;
说明：font-size的属性值可以有两种方式，一种是使用关键字，二是使用像素做单位的数值。
font-size属性值
1、采用关键字为单位
| font-size属性值 | 说明 |
|---|---|
| xx-small | 最小 |
| x-small | 较小 |
| small | 小 |
| medium | 默认值，正常 |
| large | 大 |
| x-large | 较大 |
| xx-large | 最大 |
这些都是相对浏览器默认情况下而言。对于这些属性值，我们完全不需要记忆，大家一定要记住喔。因为我们在实际开发中，比较少使用这种方式来表达字体大小，一般都是采用像素作为单位的数值。之所以给大家讲一下，就是让大家了解一下，以免以后看到别人写的代码看不懂。
实例：
<!DOCTYPE html>
<html ns=\"http://www.w3.org/1999/xhtml\">
<head>
< >font-size属性</ >
<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>
效果为：
![\"css](\"/images/css_font_size_1089_1.png\")
<##ads_in_article_manong##>
2、采用px为单位
在中国的大部分主流网站如新浪、网易等中，大部分都是采用px为单位。
(1)什么叫px？
px，全称“pixel”（像素）。px就是一张图片中最小的点，或者是计算机屏幕最小的点。
举个例子，下面有一个新浪图标：
![\"css](\"/images/css_font_size_1089_2.png\")
将这个图标放大n倍如下：
![\"css](\"/images/css_font_size_1089_4.png\")
你会发现，原来一张图片是由很多的小方点组成的，每一个小方点其实就是我们常常所说的一个像素（px）。一台计算机的分辨率是800px×600px指的就是“计算机宽是800个小方点，高是600个小方点”。
px是一个相对单位，它是相对显示器屏幕分辨率而言的。例如windows系统的分辨率为每英寸96px，mac系统的分辨率为每英寸72px。
对于初学者来说，1px可以看出一个小点，多少px就可以看成多少个小点组成。我们经过CSS学习的锤炼，很快就能掌握像素px这个概念了。
实例
<!DOCTYPE html>
<html ns=\"http://www.w3.org/1999/xhtml\">
<head>
< >font-size属性</ >
<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](\"/images/css_font_size_1089_3.png\")
稍微了解过CSS的朋友都会觉察到，font-size的单位不仅仅只有px，还有em、百分比等等。对于初学者来说，我们仅仅掌握以px单位就行了，如果需要了解更多单位，请查看这里：css单位
相关文章
CSS 教程: CSS Font
CSS 参考手册: font 属性
CSS 参考手册: CSS font-size
继续阅读与本文标签相同的文章
下一篇 :
是什么在阻碍开发者使用开源软件？
-
未来十年，最为吃香的4个大学专业，毕业后就是香饽饽！
2026-05-14栏目： 教程
-
还不会制作填充地图，试试这种方法，2分钟搞定，让你秒变大神
2026-05-14栏目： 教程
-
顺丰自研机器人惊艳亮相，化身“快递小哥”亮绝活，盯上万亿市场
2026-05-14栏目： 教程
-
女生“主动”与你分享这3个秘密？520％偷偷喜欢你，臭弟弟冲鸭
2026-05-14栏目： 教程
-
这4类大学专业很吃香，市场人才紧缺，毕业后前景很好！
2026-05-14栏目： 教程