CSS如何设置字体大小

在网页设计中，字体大小的设置至关重要，它直接影响用户的阅读体验和页面的整体美感。CSS（层叠样式表）提供了多种方式来精确控制字体大小。

最基本的设置方法是使用 font-size 属性。可以为它指定不同的单位，常见的有像素（px）、百分比（%）、em 和 rem。

像素（px）是一个固定单位。例如，设置 font-size: 16px;，那么该元素的字体大小就会固定为 16 像素。这种方式的优点是非常精确，在不同设备上显示效果较为稳定，适合对字体大小有明确要求的场景，如标题等。但缺点是缺乏灵活性，如果需要整体调整页面字体大小，就需要逐个修改每个设置了 px 单位的地方。

百分比（%）则是相对单位，它是相对于父元素的字体大小而言。比如，父元素的字体大小是 16px，子元素设置 font-size: 150%;，那么子元素的字体大小就是 16×1.5 = 24px。使用百分比可以实现字体大小的相对缩放，方便整体调整页面字体规模。

em 单位同样是相对单位，它相对于元素本身的字体大小。如果一个元素没有显式设置字体大小，它会继承父元素的字体大小，此时 1em 就等于父元素的字体大小。例如，父元素字体大小为 16px，子元素设置 font-size: 1.2em;，那么子元素字体大小就是 16×1.2 = 19.2px。em 单位常用于实现自适应字体大小，当父元素字体变化时，子元素字体也会相应变化。

rem 是相对于根元素（html 元素）的字体大小。根元素的字体大小一般默认是 16px，设置 font-size: 2rem; 就相当于 16×2 = 32px。使用 rem 单位的好处是可以通过修改根元素的字体大小，轻松实现对整个页面字体大小的统一调整，在响应式设计中非常实用。

除了上述这些常规设置，在 CSS3 中还引入了一些新的单位，如 vw（视口宽度的百分比）和 vh（视口高度的百分比），也可以用来设置字体大小，实现基于视口大小的自适应字体效果。掌握这些 CSS 设置字体大小的方法，能让网页设计师根据不同需求，打造出完美的页面排版和用户体验。