CSS line-height 属性-代码号

CSS line-height 属性行高全面指南

概述

CSS line-height 属性是排版系统中的核心属性，用于控制文本行间的垂直间距行高。该属性不仅影响文本的可读性和美观性，还在网页布局和视觉层次中扮演着重要角色。正确的行高设置能够显著提升用户的阅读体验。

基本语法与取值

语法结构

selector {
    line-height: value;
}

属性值详解

normal（默认值）

.normal-example {
    line-height: normal; /* 浏览器默认行高，通常为1.2 */
}

数值（推荐使用）

.number-example {
    line-height: 1.6; /* 无单位数值，相对于当前字体尺寸 */
}

长度单位

.length-example {
    line-height: 24px; /* 固定像素值 */
    line-height: 1.5rem; /* 相对单位 */
    line-height: 1.2em; /* 相对字体尺寸 */
}

百分比

.percent-example {
    line-height: 150%; /* 相对于当前字体尺寸的百分比 */
}

全局值

.global-example {
    line-height: initial; /* 重置为默认值 */
    line-height: inherit; /* 继承父元素值 */
}

实际应用示例

基础文本排版

<article class="article-content">
    <h2>代码号编程学习指南</h2>
    <p>欢迎来到代码号编程学习平台，这里提供全面的编程教程和实践项目。</p>
    <p>我们的使命是让编程学习变得更加简单和有趣。</p>
</article>
<style>
.article-content {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    line-height: 1.6; /* 优美的行高比例 */
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.article-content h2 {
    font-size: 2rem;
    line-height: 1.3; /* 标题行高略小于正文 */
    margin-bottom: 1rem;
    color: #2c3e50;
}

.article-content p {
    margin-bottom: 1.5rem;
    text-align: justify;
}
</style>

响应式行高调整

.responsive-text {
    font-size: 16px;
    line-height: 1.5; /* 基础行高 */
}

/* 移动设备优化 */
@media (max-width: 768px) {
    .responsive-text {
        font-size: 14px;
        line-height: 1.6; /* 小屏幕上增加行高提高可读性 */
    }
}

/* 桌面设备优化 */
@media (min-width: 1200px) {
    .responsive-text {
        font-size: 18px;
        line-height: 1.5; /* 大屏幕保持舒适行高 */
    }
}

/* 高分辨率设备 */
@media (min-resolution: 2dppx) {
    .responsive-text {
        line-height: 1.55; /* 微调以适应更高分辨率 */
    }
}

高级应用技巧

垂直居中文本

<div class="centered-box">
    <span class="centered-text">垂直居中文本</span>
</div>
<style>
.centered-box {
    height: 100px;
    background-color: #3498db;
    display: flex;
    align-items: center;
    justify-content: center;
}

.centered-text {
    line-height: 100px; /* 与容器高度相同 */
    color: white;
    font-size: 1.2rem;
}

/* 替代方案：使用相同的行高和高度 */
.single-line-text {
    height: 50px;
    line-height: 50px; /* 行高等于元素高度 */
    background-color: #e74c3c;
    color: white;
    text-align: center;
}
</style>

多语言排版优化

/* 中文排版优化 */
.chinese-text {
    font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
    font-size: 16px;
    line-height: 1.8; /* 中文需要更大的行高 */
    text-align: justify;
}

/* 英文排版优化 */
.english-text {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5; /* 英文行高相对较小 */
    text-align: left;
}

/* 代码块排版 */
.code-text {
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 14px;
    line-height: 1.4; /* 代码需要紧凑的行高 */
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    overflow-x: auto;
}

完整示例演示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>line-height 属性演示 - 代码号编程学习</title>
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
            --text-color: #2c3e50;
            --background-color: #ecf0f1;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--background-color);
            margin: 0;
            padding: 20px;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .demo-section {
            margin: 40px 0;
            padding: 30px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            background-color: #fafafa;
        }

        .section-title {
            color: var(--primary-color);
            margin-bottom: 20px;
            font-size: 1.8rem;
        }

        /* 不同行高对比示例 */
        .line-height-compare {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        .lh-tight {
            line-height: 1.2;
            background: linear-gradient(45deg, #ffeaa7, #fab1a0);
            padding: 20px;
            border-radius: 5px;
        }

        .lh-normal {
            line-height: 1.6;
            background: linear-gradient(45deg, #74b9ff, #a29bfe);
            padding: 20px;
            border-radius: 5px;
            color: white;
        }

        .lh-loose {
            line-height: 2.0;
            background: linear-gradient(45deg, #55efc4, #00b894);
            padding: 20px;
            border-radius: 5px;
            color: white;
        }

        .code-block {
            background: #2d3748;
            color: #e2e8f0;
            padding: 20px;
            border-radius: 8px;
            font-family: 'Monaco', 'Consolas', monospace;
            line-height: 1.4;
            overflow-x: auto;
            margin: 20px 0;
        }

        .best-practice {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 25px;
            border-radius: 8px;
            margin: 30px 0;
        }

        .best-practice h3 {
            margin-top: 0;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>CSS line-height 属性全面演示</h1>

        <div class="demo-section">
            <h2 class="section-title">行高对比示例</h2>
            <div class="line-height-compare">
                <div class="lh-tight">
                    <h3>紧凑行高 (1.2)</h3>
                    <p>代码号编程学习平台提供高质量的编程教程。紧凑的行高适合代码显示，但在长文本中可能影响可读性。适合标题和短文本内容。</p>
                </div>
                
                <div class="lh-normal">
                    <h3>标准行高 (1.6)</h3>
                    <p>代码号编程学习平台致力于让编程学习更简单。标准的行高提供良好的阅读体验，适合大多数正文内容。这是推荐的基础行高设置。</p>
                </div>
                
                <div class="lh-loose">
                    <h3>宽松行高 (2.0)</h3>
                    <p>代码号编程学习平台拥有丰富的学习资源。宽松的行高增强可读性，特别适合长篇文章和移动设备阅读。提供舒适的阅读体验。</p>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h2 class="section-title">代码示例</h2>
            <div class="code-block">
/* 基础行高设置 */
.body-text {
    font-size: 16px;
    line-height: 1.6; /* 无单位数值，推荐使用 */
    color: #333;
}

/* 响应式行高调整 */
@media (max-width: 768px) {
    .body-text {
        font-size: 14px;
        line-height: 1.7; /* 移动设备增加行高 */
    }
}

/* 标题行高优化 */
.heading {
    font-size: 2rem;
    line-height: 1.3; /* 标题行高较小 */
    margin-bottom: 1rem;
}

/* 代码块行高 */
.code {
    font-family: monospace;
    line-height: 1.4; /* 代码需要紧凑行高 */
    background: #f4f4f4;
    padding: 15px;
}
            </div>
        </div>

        <div class="best-practice">
            <h3>实践建议</h3>
            <p>1. 使用无单位数值（如1.5-1.8）以便响应式调整</p>
            <p>2. 正文内容推荐行高：1.5-1.7</p>
            <p>3. 标题行高可以适当减小（1.2-1.4）</p>
            <p>4. 代码块使用紧凑行高（1.3-1.5）</p>
            <p>5. 移动设备适当增加行高提高可读性</p>
        </div>
    </div>
</body>
</html>

响应式设计实践

移动端行高优化

/* 移动优先的行高策略 */
.mobile-optimized {
    font-size: 14px;
    line-height: 1.7; /* 移动设备增加行高 */
    margin-bottom: 1rem;
}

/* 平板设备优化 */
@media (min-width: 768px) {
    .mobile-optimized {
        font-size: 16px;
        line-height: 1.6;
    }
}

/* 桌面设备优化 */
@media (min-width: 1024px) {
    .mobile-optimized {
        font-size: 18px;
        line-height: 1.5;
    }
}

/* 黑暗模式支持 */
@media (prefers-color-scheme: dark) {
    .mobile-optimized {
        color: #e0e0e0;
        line-height: 1.65; /* 暗模式下略微增加行高 */
    }
}

可访问性优化

/* 基础可访问性设置 */
.accessible-text {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

/* 视力障碍用户支持 */
@media (prefers-reduced-transparency: reduce) {
    .accessible-text {
        line-height: 1.7; /* 减少透明效果时增加行高 */
    }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
    .accessible-text {
        line-height: 1.65;
        color: #000;
        background-color: #fff;
    }
}

/* 运动减少偏好 */
@media (prefers-reduced-motion: reduce) {
    .accessible-text {
        transition: none; /* 减少动画效果 */
    }
}

性能优化建议

字体加载优化

/* 字体加载状态处理 */
.text-content {
    font-size: 16px;
    line-height: 1.6;
}

/* 字体加载完成后的优化 */
.font-loaded .text-content {
    line-height: 1.62; /* 微调以适应具体字体 */
    font-feature-settings: "kern" 1; /* 启用字距调整 */
}

/* 备用字体行高调整 */
@font-face {
    font-family: 'CustomFont';
    src: url('https://www.ebingou.cn/fonts/custom.woff2') format('woff2');
    font-display: swap;
}

.fallback-font {
    font-family: 'CustomFont', 'FallbackFont', sans-serif;
    line-height: 1.55; /* 根据备用字体调整 */
}

本节课程知识要点

数值选择策略：根据内容类型选择合适的行高数值
响应式适配：为不同设备和屏幕尺寸提供优化的行高方案
可访问性考虑：确保行高设置符合无障碍访问标准
性能优化：结合字体加载策略进行行高微调
用户体验：通过行高变化提供舒适的阅读体验
浏览器兼容性：了解不同浏览器的行高渲染差异
维护性：使用CSS变量统一管理行高系统

浏览器兼容性提示

所有现代浏览器都支持各种行高取值方式
无单位数值在所有浏览器中表现一致，推荐使用
百分比和em单位在嵌套元素中需要注意继承关系
移动端浏览器对行高的渲染可能略有差异

通过合理运用 line-height 属性，开发者可以创建出既美观又实用的文本排版系统。

本文标签：

CSS line-height 属性

CSS line-height 属性行高全面指南

概述

基本语法与取值

语法结构

属性值详解

normal（默认值）

数值（推荐使用）

长度单位

百分比

全局值

实际应用示例

基础文本排版

响应式行高调整

高级应用技巧

垂直居中文本

多语言排版优化

完整示例演示

响应式设计实践

移动端行高优化

可访问性优化

性能优化建议

字体加载优化

本节课程知识要点

浏览器兼容性提示

感谢您的认可和支持