CSS中的font属性是用来设置文本字体相关样式的简写属性，font: 14px/20px是其中很常见的一种写法，很多刚接触CSS的开发者看到斜杠分隔的两个数值会觉得困惑，不知道具体对应哪些样式规则。
font简写属性的基本结构
font属性可以同时设置多个字体相关的样式，完整的语法格式如下：
font: font-style font-variant font-weight font-size/line-height font-family;
其中font-style、font-variant、font-weight都是可选参数，而font-size和font-family是必填参数，如果缺少这两个参数，整个font声明会无效。
14px/20px的具体含义
在font: 14px/20px这个写法中，斜杠前面的14px对应的是font-size属性，也就是字体的大小为14像素；斜杠后面的20px对应的是line-height属性，也就是文本的行高为20像素。
我们可以把这个简写拆分成两个单独的CSS属性来验证效果：
/* 简写写法 */
.text1 {
font: 14px/20px;
font-family: "微软雅黑";
}
/* 拆分写法，效果完全一致 */
.text2 {
font-size: 14px;
line-height: 20px;
font-family: "微软雅黑";
}
使用font简写的注意事项
- 如果要设置行高，必须和font-size用斜杠连接，不能直接写两个空格分隔的数值，比如font: 14px 20px是错误的写法，浏览器无法识别。
- 行高除了可以用像素单位，还可以用数字、百分比、em等单位，比如font: 14px/1.5 代表行高是字体大小的1.5倍，也就是21px。
- font-family必须放在最后，且如果字体名称包含空格，需要用引号包裹，比如font: 14px/20px "PingFang SC", sans-serif。
实际效果示例
我们可以通过下面的代码看到不同行高设置的实际显示差异：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>font属性示例</title>
<style>
.box1 {
font: 14px/20px "微软雅黑";
width: 300px;
border: 1px solid #ccc;
margin-bottom: 20px;
}
.box2 {
font: 14px/28px "微软雅黑";
width: 300px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box1">
这是第一段测试文本，行高设置为20px，文字之间的垂直间距会比较小，适合内容密集的排版场景。
</div>
<div class="box2">
这是第二段测试文本，行高设置为28px，文字之间的垂直间距会比较大，阅读起来会更加舒适，适合长文阅读场景。
</div>
</body>
</html>
从上面的示例可以看到，行高越大，每行文本之间的空白区域就越多，页面的可读性也会相应提升，开发者可以根据实际的排版需求调整font简写中的行高数值。
CSSfont属性字体大小行高line-height修改时间：2026-06-14 20:24:23