HTML/CSS 文本字体与字号设置实战指南 | 极客日志

HTML / CSS大前端

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

HTML/CSS 文本字体与字号设置实战指南。详解 font-family 字体族定义及回退机制，对比 pt、px、em、rem、% 等单位特性，解析绝对与相对关键字用法。重点指出嵌套元素使用相对单位时的尺寸累积问题，提供避免样式失控的实战建议。适合前端初学者快速掌握文本排版核心规范。

w795471发布于 2025/2/230 浏览

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; }
    </>


I love you. -- sans-serif
I love you. -- Verdana
I love you. -- monospace
I love you. -- cursive
I love you. -- fantasy
I love you. -- Courier New, Andale Mono, monospace

<!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>

<!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>

<!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>

<!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>