CSS font-size 字体大小-代码号

CSS font-size 属性详解：字体尺寸的精确控制

概述

CSS font-size 属性是文本样式控制的核心属性之一，用于精确指定字体尺寸。该属性影响元素的文本内容显示大小，默认值为 medium，可应用于所有可见元素。掌握 font-size 属性的各种取值单位和应用场景，是前端开发的基础技能。

属性语法与取值

基本语法格式

selector {
    font-size: value;
}

绝对尺寸关键字

.abs-keyword {
    font-size: xx-small;   /* 极小尺寸 */
    font-size: x-small;    /* 较小尺寸 */
    font-size: small;      /* 小尺寸 */
    font-size: medium;     /* 中等尺寸（默认值） */
    font-size: large;      /* 大尺寸 */
    font-size: x-large;    /* 较大尺寸 */
    font-size: xx-large;   /* 极大尺寸 */
}

相对尺寸关键字

.rel-keyword {
    font-size: smaller;    /* 相对较小 */
    font-size: larger;     /* 相对较大 */
}

尺寸单位详解

像素单位 (px)

像素单位提供精确的尺寸控制，是最常用的单位之一。

<!DOCTYPE html>
<html>
<head>
<style>
.article-title {
    font-size: 32px;
    font-weight: bold;
    color: #2c3e50;
}

.article-content {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.sidebar-text {
    font-size: 14px;
    color: #666;
}
</style>
</head>
<body>
<h1 class="article-title">文章标题</h1>
<p class="article-content">这里是文章正文内容，使用16像素字体大小，适合大多数用户阅读。</p>
<aside class="sidebar-text">侧边栏辅助信息使用14像素字体。</aside>
</body>
</html>

Em 相对单位

Em 单位基于当前元素的字体大小进行计算，支持响应式设计。

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    font-size: 16px; /* 基准大小 */
}

.heading-primary {
    font-size: 2em; /* 32px */
    margin-bottom: 0.5em; /* 16px */
}

.heading-secondary {
    font-size: 1.5em; /* 24px */
    margin-bottom: 0.75em; /* 18px */
}

.paragraph {
    font-size: 1em; /* 16px */
    line-height: 1.5em; /* 24px */
}

.highlight {
    font-size: 1.125em; /* 18px */
}
</style>
</head>
<body>
<div class="container">
    <h1 class="heading-primary">主要标题</h1>
    <h2 class="heading-secondary">次要标题</h2>
    <p class="paragraph">普通段落文本<span class="highlight">重点强调内容</span>。</p>
</div>
</body>
</html>

Rem 根相对单位

Rem 单位基于根元素(html)的字体大小，避免嵌套带来的计算复杂性。

:root {
    font-size: 16px; /* 1rem = 16px */
}

.component {
    font-size: 1rem; /* 16px */
}

.title {
    font-size: 2rem; /* 32px */
}

.subtitle {
    font-size: 1.5rem; /* 24px */
}

.text {
    font-size: 1rem; /* 16px */
}

.small {
    font-size: 0.875rem; /* 14px */
}

响应式字体设计

视口单位 (vw/vh)

使用视口单位实现真正的响应式字体尺寸。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.responsive-heading {
    font-size: 5vw; /* 视口宽度的5% */
    text-align: center;
    margin: 2vw 0;
}

.responsive-subheading {
    font-size: 3vw;
    text-align: center;
    color: #666;
}

.responsive-content {
    font-size: calc(1rem + 0.5vw); /* 基础大小 + 响应式增量 */
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 5vw;
}
</style>
</head>
<body>
<h1 class="responsive-heading">响应式标题</h1>
<h2 class="responsive-subheading">自适应子标题</h2>
<p class="responsive-content">这段文字会根据浏览器窗口大小自动调整字体尺寸，确保在各种设备上都有良好的阅读体验。</p>
</body>
</html>

媒体查询适配

:root {
    font-size: 14px;
}

/* 平板设备 */
@media (min-width: 768px) {
    :root {
        font-size: 16px;
    }
}

/* 桌面设备 */
@media (min-width: 1024px) {
    :root {
        font-size: 18px;
    }
}

/* 大屏设备 */
@media (min-width: 1440px) {
    :root {
        font-size: 20px;
    }
}

长度单位应用

多种长度单位示例

.length-examples {
    font-size: 16px;      /* 像素 - 最常用 */
    font-size: 1em;       /* em - 相对单位 */
    font-size: 1rem;      /* rem - 根相对单位 */
    font-size: 12pt;      /* 点 - 印刷单位 */
    font-size: 0.5cm;     /* 厘米 - 绝对单位 */
    font-size: 5mm;       /* 毫米 - 绝对单位 */
    font-size: 0.2in;     /* 英寸 - 绝对单位 */
}

实际应用场景

<!DOCTYPE html>
<html>
<head>
<style>
.print-document {
    font-family: "Times New Roman", serif;
}

.print-title {
    font-size: 24pt; /* 打印文档常用点单位 */
    font-weight: bold;
}

.print-content {
    font-size: 12pt;
    line-height: 1.5;
}

.metric-example {
    font-size: 0.8cm; /* 厘米单位示例 */
    background: #f0f0f0;
    padding: 0.5cm;
}
</style>
</head>
<body>
<article class="print-document">
    <h1 class="print-title">打印文档标题</h1>
    <p class="print-content">这段内容使用点(pt)单位，适合打印输出场景。</p>
</article>

<div class="metric-example">
    这个示例使用厘米(cm)单位，主要用于特殊场景。
</div>
</body>
</html>

综合实践示例

完整的字体尺寸系统

/* 字体尺寸系统 */
:root {
    --text-xs: 0.75rem;   /* 12px */
    --text-sm: 0.875rem;  /* 14px */
    --text-base: 1rem;    /* 16px */
    --text-lg: 1.125rem;  /* 18px */
    --text-xl: 1.25rem;   /* 20px */
    --text-2xl: 1.5rem;   /* 24px */
    --text-3xl: 1.875rem; /* 30px */
    --text-4xl: 2.25rem;  /* 36px */
}

/* 组件样式 */
.typography-system {
    font-family: system-ui, sans-serif;
}

.heading-1 {
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: 1.2;
}

.heading-2 {
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.3;
}

.heading-3 {
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1.4;
}

.body-large {
    font-size: var(--text-lg);
    line-height: 1.6;
}

.body {
    font-size: var(--text-base);
    line-height: 1.6;
}

.caption {
    font-size: var(--text-sm);
    color: #666;
}

.micro {
    font-size: var(--text-xs);
    color: #999;
}

响应式字体系统

/* 移动优先的响应式系统 */
.fluid-heading {
    font-size: clamp(1.5rem, 5vw, 3rem);
    line-height: 1.2;
}

.fluid-body {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    line-height: 1.6;
}

.fluid-caption {
    font-size: clamp(0.875rem, 2vw, 1rem);
}

/* 断点响应式 */
@media (min-width: 640px) {
    .responsive-text {
        font-size: 1.125rem;
    }
}

@media (min-width: 1024px) {
    .responsive-text {
        font-size: 1.25rem;
    }
}

@media (min-width: 1280px) {
    .responsive-text {
        font-size: 1.375rem;
    }
}

本节课程知识要点

单位选择策略：根据场景选择合适的尺寸单位（px、em、rem、vw等）
响应式设计：掌握使用相对单位和媒体查询实现字体响应式
可访问性考虑：确保字体大小符合可访问性标准，建议正文不小于16px
性能优化：避免过多使用绝对单位，提高代码维护性
层次结构：建立清晰的字体尺寸层次系统，增强视觉协调性
跨平台一致性：考虑不同设备和浏览器的渲染差异
计算技巧：熟练使用calc()和clamp()等函数进行复杂计算

浏览器兼容性提示

现代浏览器全面支持所有常用单位
旧版IE浏览器对rem和视口单位支持有限
移动端浏览器对vw/vh单位支持良好
建议使用CSS预处理器进行单位计算和转换

通过系统掌握font-size属性的各种用法，开发者可以创建出既美观又实用的文本排版系统。关于字体的详细教程可查看CSS font 字体技术文档。

本文标签：

CSS font-size 字体大小