HTML/CSS 文本字体与字号设置实战指南

一、设置字体名称

在网页设计中，选择合适的字体是提升可读性的关键。CSS 允许通过 font-family 属性指定字体，并支持多个备选方案。

当浏览器渲染文本时，它会按顺序检查列表中的字体。如果系统安装了首选字体（如 Courier New），则直接显示；若未安装，则尝试下一个；如果列表中的所有字体都不可用，最终会回退到最后一个通用字体族（如 monospace）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <style type="text/css">
        #p1 { font-family: sans-serif; font-size: 3em; }
        #p2 { font-family: Verdana; font-size: 2em; }
        #p3 { font-family: monospace; font-size: 2em; }
        #p4 { font-family: cursive; font-size: 2em; }
        #p5 { font-family: fantasy; font-size: 2em; }
        #p6 { font-family: "Courier New", "Andale Mono", monospace; font-size: 2em; }
    </style>
</head>
<body>
<p id="p1">I love you. -- sans-serif</p>
<p id="p2">I love you. -- Verdana</p>
<p id="p3">I love you. -- monospace</p>
<p id="p4">I love you. -- cursive</p>
<p id="p5">I love you. -- fantasy</p>
<p id="p6">I love you. -- Courier New, Andale Mono, monospace</p>
</body>
</html>

二、设置字号

字号控制着文本的视觉大小，CSS 提供了多种度量方式，理解它们的区别至关重要。

1. 常用单位

绝对单位：pt 与 pc

点（point）和派卡（pica）主要用于打印设计。1pc = 12pt，1pt = 1/72 英寸。虽然它们在屏幕显示上也能工作，但不同设备的像素密度差异会导致显示效果不一致，因此不建议用于纯屏幕显示的文本样式。

像素：px

像素（pixel）是屏幕显示中最常用的单位。它能让文本在不同浏览器和平台上保持一致的外观。不过，固定像素值可能会忽略用户在浏览器中设置的默认缩放偏好，影响无障碍体验。

相对单位：em、ex、%

• em: 基于父元素的字体大小。1em 通常等于当前上下文下的默认字号。使用 em 可以让用户通过浏览器设置调整整体文本大小，兼容性更好。
• ex: 基于小写字母 x 的高度。理论上是相对单位，但在实际应用中不如 em 普及。
• 百分比 (%): 与 em 类似，100% 等同于 1em。

此外，rem 是一个较新的单位，它相对于根元素（html）的字体大小，避免了 em 在嵌套结构中的累积效应。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>字号单位演示</title>
    <style type="text/css">
        #p0 { font-size: 1pc; }
        #p1 { font-size: 12pt; }
        #p2 { font-size: 16px; }
        #p3 { font-size: 1em; }
        #p4 { font-size: 1ex; }
        #p5 { font-size: 100%; }
        #p6 { font-size: 1rem; }
        .note { width: 50%; height: 200px; overflow-y: scroll; }
    </style>
</head>
<body>
<p id="p0">I love you. -- 1pc</p>
<p id="p1">I love you. -- 12pt</p>
<p id="p2">I love you. -- 16px</p>
<p id="p3">I love you. -- 1em</p>
<p id="p4">I love you. -- 1ex</p>
<p id="p5">I love you. -- 100%</p>
<p id="p6">I love you. -- 1rem</p>
<hr/>
<div class="note">
    <ol>
        <li>1pc = 1/6 inch, 1pt = 1/72 inch ==> 1pc=12pt</li>
        <li>1pc ≈ 12pt ≈ 16px ≈ 1em (视浏览器默认设置而定)</li>
        <li>pc、pt、px 属于绝对度量单位。</li>
        <li>em、ex、percentage 属于相对度量单位。</li>
        <li>em 相对于直接父元素，rem 相对于顶级根元素。</li>
    </ol>
</div>
</body>
</html>

2. 关键字设置

除了数值，CSS 还支持关键字来定义字号。

绝对关键字

包括 xx-small 到 xx-large，共七个级别。大多数浏览器将 medium 视为默认未样式化的文本大小，其他关键字在此基础上按比例调整。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字号绝对关键字</title>
    <style type="text/css">
        #p0 { font-size: xx-small; }
        #p1 { font-size: x-small; }
        #p2 { font-size: small; }
        #p3 { font-size: medium; }
        #p4 { font-size: large; }
        #p5 { font-size: x-large; }
        #p6 { font-size: xx-large; }
    </style>
</head>
<body>
<p id="p0">I love you. -- xx-small</p>
<p id="p1">I love you. -- x-small</p>
<p id="p2">I love you. -- small</p>
<p id="p3">I love you. -- medium</p>
<p id="p4">I love you. -- large</p>
<p id="p5">I love you. -- x-large</p>
<p id="p6">I love you. -- xx-large</p>
</body>
</html>

相对关键字

larger 和 smaller 分别表示比父元素大一级或小一级。这类似于 em 和 % 的逻辑，依赖于上下文。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字号相对关键字</title>
    <style type="text/css">
        p{
            font-size: 2em;
            font-family: "Times New Roman";
        }
        weak {
            font-size: smaller;
            color: #f0ad4e;
        }
        em {
            font-size: larger;
            color: red;
        }
    </style>
</head>
<body>
<p>
    Last year, when he was searching for people to invest in his company,
    he wanted <weak>someone</weak> who knew the <em>Chinese</em> market.
</p>
</body>
</html>

3. 嵌套元素的陷阱

在使用相对单位（如 %、em）时，需要注意嵌套层级带来的尺寸累积效应。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对字号度量遇到的问题</title>
    <style type="text/css">
        div, p, em, a, code {
            font-size: 130%;
        }
        .note {
            width: 100%;
            height: 300px;
            overflow-y: scroll;
            border: 1px solid lightgrey;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div>
    <p>
        You'll <em>probably</em> be surprised when using
        <a href="#">a relative <code>font-size</code></a>
        and nested elements.
    </p>
</div>
<div class="note">
    <pre>
         div, p, em, a, code {
            font-size: 130%;
        }
    </pre>
    <hr/>
    <pre>
        <p>You'll <em>probably</em> be surprised when using
        <a href="#">a relative <code>font-size</code></a>
        and nested elements. </p>
    </pre>
    <p>说明：div 字号是默认字号的 130%，其子元素 p 的字号是 div 字号的 130%，即默认字号的 169%；然后 em、a、code 三个元素又是 p 元素的子元素，其字号是 p 元素字号的 130%，那就是默认字号的 219.7%。</p>
</div>
</body>
</html>

在实际开发中，这种指数级增长可能导致文本过大或布局错乱。建议在设计组件时，尽量统一根节点的字号基准，或使用 rem 配合 JS 动态计算，以避免此类连锁反应。