答案:通过font-size和line-height控制字体大小与行高,font-size支持px、em、rem、%、pt等单位,line-height推荐使用无单位数值以提升适应性,二者可通过font属性简写为“font: 16px/1.5 Arial, sans-serif”形式,合理设置可提升文本可读性与视觉效果。

在CSS中控制字体大小与行高,主要通过 font-size 和 line-height 两个属性来实现。它们直接影响文本的可读性和页面的视觉效果。
设置字体大小(font-size)
font-size 属性用于定义文本的尺寸。你可以使用多种单位来设置大小:
- px(像素):固定单位,常用且直观。例如:font-size: 16px;
- em:相对于父元素字体大小的倍数。例如:父元素为16px,font-size: 1.5em; 就是24px
- rem:相对于根元素(html)的字体大小,适合做响应式设计
- %:百分比形式,相对于父元素大小
- pt(点):常用于打印样式,1pt = 1/72英寸
设置行高(line-height)
line-height 控制文本行与行之间的垂直间距,合适的行高能提升阅读体验。
- 可以设置为无单位数值,如 line-height: 1.5;,表示字体大小的1.5倍
- 也可用具体单位,如 line-height: 24px; 或 line-height: 1.8em;
- 使用无单位值更推荐,因为它会根据当前 font-size 自动计算,更具适应性
简写语法:使用 font 属性
你可以用 font 属性一次性设置字体大小和行高,前提是同时设置 font-family。
立即学习“前端免费学习笔记(深入)”;
font: 16px/1.5 Arial, sans-serif;其中斜杠前是 font-size,斜杠后是 line-height。注意:这种写法会重置其他字体相关属性,建议只在需要时使用。
基本上就这些。合理搭配 font-size 和 line-height,能让文字看起来更舒适自然。










