文本与字体

CSS 提供了丰富的属性来控制文本和字体的显示效果。

字体属性

font-family

设置字体族：

css

body {
    font-family: Arial, "Helvetica Neue", sans-serif;
}

.code {
    font-family: "Courier New", Courier, monospace;
}

font-size

设置字体大小：

css

p {
    font-size: 16px;
    font-size: 1em;
    font-size: 1rem;
    font-size: 100%;
}

font-weight

设置字体粗细：

css

.normal { font-weight: normal; }  /* 400 */
.bold { font-weight: bold; }      /* 700 */
.light { font-weight: 300; }
.medium { font-weight: 500; }
.heavy { font-weight: 900; }

font-style

设置字体样式：

css

.normal { font-style: normal; }
.italic { font-style: italic; }
.oblique { font-style: oblique; }

font-variant

设置小型大写字母：

css

.small-caps {
    font-variant: small-caps;
}

font 简写

css

p {
    font: italic bold 16px/1.5 Arial, sans-serif;
    /* font-style font-weight font-size/line-height font-family */
}

文本属性

color

设置文本颜色：

css

p {
    color: red;
    color: #333;
    color: rgb(51, 51, 51);
    color: rgba(51, 51, 51, 0.8);
}

text-align

设置文本对齐：

css

.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }

text-decoration

设置文本装饰：

css

.none { text-decoration: none; }
.underline { text-decoration: underline; }
.overline { text-decoration: overline; }
.line-through { text-decoration: line-through; }

/* 组合使用 */
.combined {
    text-decoration: underline wavy red;
}

text-transform

设置文本转换：

css

.none { text-transform: none; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

text-indent

设置首行缩进：

css

p {
    text-indent: 2em;
}

line-height

设置行高：

css

p {
    line-height: 1.6;
    line-height: 24px;
    line-height: 150%;
}

letter-spacing

设置字母间距：

css

p {
    letter-spacing: 2px;
    letter-spacing: 0.1em;
}

word-spacing

设置单词间距：

css

p {
    word-spacing: 5px;
}

white-space

设置空白处理：

css

.normal { white-space: normal; }      /* 默认，合并空白 */
.nowrap { white-space: nowrap; }      /* 不换行 */
.pre { white-space: pre; }            /* 保留空白 */
.pre-wrap { white-space: pre-wrap; }  /* 保留空白，自动换行 */
.pre-line { white-space: pre-line; }  /* 合并空白，保留换行 */

word-break

设置单词换行规则：

css

.normal { word-break: normal; }
.break-all { word-break: break-all; }  /* 允许在单词内换行 */
.keep-all { word-break: keep-all; }    /* 只在空格处换行 */

overflow-wrap / word-wrap

设置长单词换行：

css

p {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

text-overflow

设置文本溢出显示：

css

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

text-shadow

设置文本阴影：

css

h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    /* x偏移 y偏移 模糊半径 颜色 */
}

.multiple-shadows {
    text-shadow: 
        1px 1px 0 #fff,
        2px 2px 0 #333;
}

Web 字体

@font-face

引入自定义字体：

css

@font-face {
    font-family: 'MyFont';
    src: url('myfont.woff2') format('woff2'),
         url('myfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'MyFont', sans-serif;
}

Google Fonts

html

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

css

body {
    font-family: 'Roboto', sans-serif;
}

文本方向

direction

设置文本方向：

css

.ltr { direction: ltr; }  /* 从左到右 */
.rtl { direction: rtl; }  /* 从右到左 */

writing-mode

设置书写模式：

css

.horizontal-tb { writing-mode: horizontal-tb; }  /* 水平从上到下 */
.vertical-rl { writing-mode: vertical-rl; }      /* 垂直从右到左 */
.vertical-lr { writing-mode: vertical-lr; }      /* 垂直从左到右 */

多列文本

css

.multi-column {
    column-count: 3;
    column-gap: 30px;
    column-rule: 1px solid #ccc;
}

/* 跨越所有列 */
h2 {
    column-span: all;
}

实践示例

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>文本与字体示例</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        h1 {
            font-size: 2.5rem;
            font-weight: 700;
            text-align: center;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
        }
        
        h2 {
            font-size: 1.5rem;
            font-weight: 600;
            border-bottom: 2px solid #007bff;
            padding-bottom: 10px;
            margin-top: 30px;
        }
        
        .intro {
            font-size: 1.1rem;
            text-align: center;
            color: #666;
            margin-bottom: 30px;
        }
        
        .content {
            text-indent: 2em;
            text-align: justify;
        }
        
        .highlight {
            background: linear-gradient(120deg, #ffd700 0%, #ffd700 100%);
            background-repeat: no-repeat;
            background-size: 100% 40%;
            background-position: 0 90%;
        }
        
        .code {
            font-family: "Fira Code", "Courier New", monospace;
            background-color: #f5f5f5;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.9em;
        }
        
        .ellipsis-demo {
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border: 1px solid #ddd;
            padding: 10px;
            margin: 10px 0;
        }
        
        .multi-column {
            column-count: 3;
            column-gap: 30px;
            column-rule: 1px solid #eee;
            text-align: justify;
        }
        
        .vertical-text {
            writing-mode: vertical-rl;
            height: 200px;
            border: 1px solid #ddd;
            padding: 20px;
            margin: 20px 0;
        }
        
        .decorated {
            text-decoration: underline wavy #007bff;
            text-decoration-thickness: 2px;
        }
        
        .uppercase {
            text-transform: uppercase;
            letter-spacing: 3px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>文本与字体示例</h1>
    
    <p class="intro">
        这是一个展示 CSS 文本和字体属性的示例页面。
    </p>
    
    <h2>基本文本样式</h2>
    <p class="content">
        这是一段正文内容，展示了<span class="highlight">高亮文本</span>效果。
        代码示例：<span class="code">console.log('Hello')</span>。
        文本可以有不同的样式，如<strong>加粗</strong>、<em>斜体</em>等。
    </p>
    
    <h2>文本溢出</h2>
    <div class="ellipsis-demo">
        这是一段很长的文本，用于演示文本溢出时显示省略号的效果。
    </div>
    
    <h2>多列布局</h2>
    <div class="multi-column">
        这是一段使用多列布局的文本内容。CSS 多列布局可以让文本像报纸一样分栏显示，非常适合长篇阅读内容。通过 column-count 属性可以指定列数，column-gap 设置列间距，column-rule 设置分隔线样式。
    </div>
    
    <h2>垂直文本</h2>
    <div class="vertical-text">
        这是一段垂直排列的文字，常见于东亚传统排版。
    </div>
    
    <h2>装饰效果</h2>
    <p class="decorated">波浪下划线装饰效果</p>
    <p class="uppercase">uppercase letter spacing</p>
</body>
</html>

文本与字体 ​

字体属性 ​

font-family ​

font-size ​

font-weight ​

font-style ​

font-variant ​

font 简写 ​

文本属性 ​

color ​

text-align ​

text-decoration ​

text-transform ​

text-indent ​

line-height ​

letter-spacing ​

word-spacing ​

white-space ​

word-break ​

overflow-wrap / word-wrap ​

text-overflow ​

text-shadow ​

Web 字体 ​

@font-face ​

Google Fonts ​

文本方向 ​

direction ​

writing-mode ​

多列文本 ​

实践示例 ​