css如何控制字体大小

CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。控制字体大小是CSS中最基本的布局技巧之一。

基础概念

CSS提供了多种属性来控制字体大小，包括：

font-size：设置元素的字体大小。
em 和 rem 单位：相对于父元素或根元素的字体大小。
px、pt、pc 等单位：绝对单位，用于精确控制字体大小。

类型

CSS中控制字体大小的属性主要有以下几种类型：

绝对单位：
- px（像素）：固定大小的单位，常用于精确控制。
- pt（点）：常用于打印。
- pc（派卡）：12个点。

相对单位：
- em：相对于父元素的字体大小。
- rem：相对于根元素（html）的字体大小。
- %：相对于父元素的字体大小的百分比。
关键字：
- small、medium、large、x-large 等：预定义的字体大小。

应用场景

网站设计：确保在不同设备上都能提供良好的阅读体验。
用户界面：使按钮、标签等元素的文本大小适应不同的屏幕分辨率。
响应式布局：根据屏幕尺寸动态调整字体大小，以优化用户体验。

示例代码

以下是一个简单的示例，展示了如何使用CSS控制字体大小：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Font Size Example</title>
    <style>
        body {
            font-size: 16px; /* 设置根元素的字体大小 */
        }
        h1 {
            font-size: 2em; /* 相对于根元素的字体大小 */
        }
        p {
            font-size: 1.2rem; /* 相对于根元素的字体大小 */
        }
        .small-text {
            font-size: 80%; /* 相对于父元素的字体大小的百分比 */
        }
    </style>
</head>
<body>
    <h1>Heading 1</h1>
    <p>This is a paragraph with normal font size.</p>
    <p class="small-text">This is a paragraph with smaller font size.</p>
</body>
</html>