Tech Docs Station

Appearance

文本与字体 ​

本章将介绍CSS中文本和字体的样式设置，包括字体属性、文本样式、文本装饰等。

字体属性 ​

font-family（字体族） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>font-family示例</title>
    <style>
        /* 使用系统默认字体 */
        .system {
            font-family: sans-serif;  /* 无衬线字体 */
        }
        
        /* 指定字体列表（从左到右依次尝试） */
        .custom {
            font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        }
        
        /* 衬线字体 */
        .serif {
            font-family: "Times New Roman", Times, serif;
        }
        
        /* 等宽字体 */
        .monospace {
            font-family: "Courier New", Courier, monospace;
        }
        
        /* 引入Web字体 */
        @font-face {
            font-family: 'CustomFont';
            src: url('custom-font.woff2') format('woff2');
        }
        
        .web-font {
            font-family: 'CustomFont', sans-serif;
        }
    </style>
</head>
<body>
    <p class="system">这是无衬线字体</p>
    <p class="custom">这是微软雅黑字体</p>
    <p class="serif">这是衬线字体Times New Roman</p>
    <p class="monospace">这是等宽字体Courier New</p>
</body>
</html>

font-size（字体大小） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>font-size示例</title>
    <style>
        /* 像素值 */
        .px { font-size: 16px; }
        
        /* em单位（相对于父元素字体大小） */
        .em { font-size: 1.5em; }
        
        /* rem单位（相对于根元素字体大小） */
        .rem { font-size: 1.5rem; }
        
        /* 百分比 */
        .percent { font-size: 150%; }
        
        /* 关键字 */
        .xx-small { font-size: xx-small; }
        .x-small { font-size: x-small; }
        .small { font-size: small; }
        .medium { font-size: medium; }      /* 默认值 */
        .large { font-size: large; }
        .x-large { font-size: x-large; }
        .xx-large { font-size: xx-large; }
        
        /* 相对关键字 */
        .smaller { font-size: smaller; }    /* 比父元素小 */
        .larger { font-size: larger; }      /* 比父元素大 */
        
        /* 视口单位 */
        .vw { font-size: 3vw; }             /* 视口宽度的3% */
        .vh { font-size: 3vh; }             /* 视口高度的3% */
    </style>
</head>
<body>
    <p class="px">16px像素大小</p>
    <p class="em">1.5em相对大小</p>
    <p class="rem">1.5rem根相对大小</p>
    <p class="large">large关键字大小</p>
</body>
</html>

font-weight（字体粗细） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>font-weight示例</title>
    <style>
        .normal { font-weight: normal; }    /* 正常（400） */
        .bold { font-weight: bold; }        /* 粗体（700） */
        .lighter { font-weight: lighter; }  /* 更细 */
        .bolder { font-weight: bolder; }    /* 更粗 */
        
        /* 数值：100-900 */
        .w100 { font-weight: 100; }         /* 最细 */
        .w200 { font-weight: 200; }
        .w300 { font-weight: 300; }
        .w400 { font-weight: 400; }         /* normal */
        .w500 { font-weight: 500; }
        .w600 { font-weight: 600; }
        .w700 { font-weight: 700; }         /* bold */
        .w800 { font-weight: 800; }
        .w900 { font-weight: 900; }         /* 最粗 */
    </style>
</head>
<body>
    <p class="normal">normal 正常粗细</p>
    <p class="bold">bold 粗体</p>
    <p class="w100">100 最细</p>
    <p class="w900">900 最粗</p>
</body>
</html>

font-style（字体样式） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>font-style示例</title>
    <style>
        .normal { font-style: normal; }     /* 正常 */
        .italic { font-style: italic; }     /* 斜体 */
        .oblique { font-style: oblique; }   /* 倾斜 */
    </style>
</head>
<body>
    <p class="normal">normal 正常样式</p>
    <p class="italic">italic 斜体</p>
    <p class="oblique">oblique 倾斜</p>
</body>
</html>

font简写属性 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>font简写示例</title>
    <style>
        /* font简写语法：
           font: font-style font-weight font-size/line-height font-family;
           必须按顺序，font-size和font-family必须指定 */
        
        .font1 {
            font: 16px Arial, sans-serif;
        }
        
        .font2 {
            font: bold 16px Arial, sans-serif;
        }
        
        .font3 {
            font: italic bold 16px/1.5 Arial, sans-serif;
        }
        
        .font4 {
            font: 16px/2 "Microsoft YaHei", sans-serif;
        }
    </style>
</head>
<body>
    <p class="font1">16px Arial</p>
    <p class="font2">bold 16px Arial</p>
    <p class="font3">italic bold 16px/1.5 Arial</p>
    <p class="font4">16px/2 微软雅黑</p>
</body>
</html>

文本样式 ​

color（文本颜色） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>color示例</title>
    <style>
        /* 颜色名称 */
        .name { color: red; }
        
        /* 十六进制 */
        .hex { color: #4CAF50; }
        
        /* RGB */
        .rgb { color: rgb(255, 0, 0); }
        
        /* RGBA（带透明度） */
        .rgba { color: rgba(255, 0, 0, 0.5); }
        
        /* HSL */
        .hsl { color: hsl(120, 100%, 50%); }
    </style>
</head>
<body>
    <p class="name">红色文字</p>
    <p class="hex">绿色文字</p>
    <p class="rgb">RGB红色</p>
    <p class="rgba">半透明红色</p>
</body>
</html>

text-align（文本对齐） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>text-align示例</title>
    <style>
        .left { text-align: left; }         /* 左对齐（默认） */
        .center { text-align: center; }     /* 居中对齐 */
        .right { text-align: right; }       /* 右对齐 */
        .justify { text-align: justify; }   /* 两端对齐 */
        
        .box {
            border: 1px solid #333;
            padding: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="box left">左对齐文本</div>
    <div class="box center">居中对齐文本</div>
    <div class="box right">右对齐文本</div>
    <div class="box justify">两端对齐文本：这是一段较长的文字，用于演示两端对齐效果。两端对齐会让文字在左右两边都对齐。</div>
</body>
</html>

text-decoration（文本装饰） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>text-decoration示例</title>
    <style>
        .none { text-decoration: none; }            /* 无装饰 */
        .underline { text-decoration: underline; }  /* 下划线 */
        .overline { text-decoration: overline; }    /* 上划线 */
        .line-through { text-decoration: line-through; } /* 删除线 */
        
        /* 组合使用 */
        .combined {
            text-decoration: underline overline line-through;
        }
        
        /* 设置样式和颜色 */
        .styled {
            text-decoration: underline;
            text-decoration-style: dashed;      /* 虚线 */
            text-decoration-color: red;         /* 红色 */
        }
        
        .wavy {
            text-decoration: underline;
            text-decoration-style: wavy;        /* 波浪线 */
            text-decoration-color: blue;
        }
    </style>
</head>
<body>
    <p class="none">无装饰文本</p>
    <p class="underline">下划线文本</p>
    <p class="overline">上划线文本</p>
    <p class="line-through">删除线文本</p>
    <p class="styled">红色虚线下划线</p>
    <p class="wavy">蓝色波浪下划线</p>
</body>
</html>

text-transform（文本转换） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>text-transform示例</title>
    <style>
        .none { text-transform: none; }             /* 无转换 */
        .capitalize { text-transform: capitalize; } /* 首字母大写 */
        .uppercase { text-transform: uppercase; }   /* 全部大写 */
        .lowercase { text-transform: lowercase; }   /* 全部小写 */
    </style>
</head>
<body>
    <p class="none">hello world - 无转换</p>
    <p class="capitalize">hello world - 首字母大写</p>
    <p class="uppercase">hello world - 全部大写</p>
    <p class="lowercase">HELLO WORLD - 全部小写</p>
</body>
</html>

text-indent（文本缩进） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>text-indent示例</title>
    <style>
        .indent {
            text-indent: 2em;   /* 首行缩进两个字符 */
        }
        
        .negative {
            text-indent: -2em;  /* 负缩进（悬挂缩进） */
            margin-left: 2em;   /* 配合margin使用 */
        }
        
        .percent {
            text-indent: 10%;   /* 百分比缩进 */
        }
    </style>
</head>
<body>
    <p class="indent">这是首行缩进的段落。首行会向右缩进两个字符的位置。这种效果常见于中文文章排版中。</p>
    
    <p class="negative">这是悬挂缩进的段落。首行会向左突出，其他行保持正常位置。</p>
</body>
</html>

line-height（行高） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>line-height示例</title>
    <style>
        .normal { line-height: normal; }    /* 默认值 */
        .number { line-height: 1.5; }       /* 数值（字体大小的倍数） */
        .length { line-height: 30px; }      /* 固定值 */
        .percent { line-height: 150%; }     /* 百分比 */
        
        .box {
            border: 1px solid #333;
            margin-bottom: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="box normal">
        <p>normal 默认行高</p>
        <p>多行文本效果</p>
    </div>
    
    <div class="box number">
        <p>1.5 倍行高（推荐）</p>
        <p>多行文本效果</p>
    </div>
    
    <div class="box length">
        <p>30px 固定行高</p>
        <p>多行文本效果</p>
    </div>
</body>
</html>

letter-spacing和word-spacing ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>字符和单词间距示例</title>
    <style>
        /* 字符间距 */
        .letter-normal { letter-spacing: normal; }
        .letter-wide { letter-spacing: 5px; }
        .letter-narrow { letter-spacing: -1px; }
        
        /* 单词间距 */
        .word-normal { word-spacing: normal; }
        .word-wide { word-spacing: 20px; }
    </style>
</head>
<body>
    <h3>letter-spacing 字符间距</h3>
    <p class="letter-normal">正常字符间距</p>
    <p class="letter-wide">加宽字符间距</p>
    <p class="letter-narrow">缩小字符间距</p>
    
    <h3>word-spacing 单词间距</h3>
    <p class="word-normal">Hello World Normal Spacing</p>
    <p class="word-wide">Hello World Wide Spacing</p>
</body>
</html>

white-space（空白处理） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>white-space示例</title>
    <style>
        .box {
            border: 1px solid #333;
            padding: 10px;
            margin-bottom: 10px;
            width: 200px;
        }
        
        /* normal：合并空白，自动换行（默认） */
        .normal { white-space: normal; }
        
        /* nowrap：合并空白，不换行 */
        .nowrap { white-space: nowrap; }
        
        /* pre：保留空白，不换行 */
        .pre { white-space: pre; }
        
        /* pre-wrap：保留空白，自动换行 */
        .pre-wrap { white-space: pre-wrap; }
        
        /* pre-line：合并空白，保留换行 */
        .pre-line { white-space: pre-line; }
    </style>
</head>
<body>
    <div class="box normal">
        normal: 多个    空格会合并，自动换行
    </div>
    
    <div class="box nowrap">
        nowrap: 多个    空格会合并，但不换行
    </div>
    
    <div class="box pre-wrap">
        pre-wrap: 多个    空格保留，自动换行
    </div>
</body>
</html>

文本阴影 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>text-shadow示例</title>
    <style>
        /* text-shadow: 水平偏移 垂直偏移 模糊半径 颜色; */
        
        .shadow1 {
            font-size: 36px;
            text-shadow: 2px 2px 4px #000;
        }
        
        /* 多层阴影 */
        .shadow2 {
            font-size: 36px;
            color: white;
            text-shadow: 
                1px 1px 0 #000,
                2px 2px 0 #000,
                3px 3px 0 #000;
        }
        
        /* 发光效果 */
        .glow {
            font-size: 36px;
            color: white;
            text-shadow: 0 0 10px #4CAF50, 0 0 20px #4CAF50;
        }
        
        /* 浮雕效果 */
        .emboss {
            font-size: 36px;
            color: #ccc;
            text-shadow: 1px 1px 1px #fff, -1px -1px 1px #000;
        }
    </style>
</head>
<body>
    <p class="shadow1">基本阴影效果</p>
    <p class="shadow2">多层阴影效果</p>
    <p class="glow">发光效果</p>
    <p class="emboss">浮雕效果</p>
</body>
</html>

列表样式 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>列表样式示例</title>
    <style>
        /* list-style-type: 列表标记类型 */
        .disc { list-style-type: disc; }           /* 实心圆（默认） */
        .circle { list-style-type: circle; }       /* 空心圆 */
        .square { list-style-type: square; }       /* 实心方块 */
        .decimal { list-style-type: decimal; }     /* 数字 */
        .lower-roman { list-style-type: lower-roman; } /* 小写罗马数字 */
        .upper-roman { list-style-type: upper-roman; } /* 大写罗马数字 */
        .lower-alpha { list-style-type: lower-alpha; } /* 小写字母 */
        .upper-alpha { list-style-type: upper-alpha; } /* 大写字母 */
        .none { list-style-type: none; }           /* 无标记 */
        
        /* list-style-position: 标记位置 */
        .inside { list-style-position: inside; }   /* 在内容区域内 */
        .outside { list-style-position: outside; } /* 在内容区域外（默认） */
        
        /* list-style-image: 自定义标记图片 */
        .image {
            list-style-image: url('bullet.png');
        }
        
        /* 简写形式 */
        .shorthand {
            list-style: square inside;
        }
        
        /* 自定义列表样式 */
        .custom {
            list-style: none;
            padding-left: 0;
        }
        
        .custom li {
            position: relative;
            padding-left: 25px;
        }
        
        .custom li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #4CAF50;
        }
    </style>
</head>
<body>
    <h3>不同标记类型</h3>
    <ul class="disc"><li>实心圆</li></ul>
    <ul class="circle"><li>空心圆</li></ul>
    <ul class="square"><li>实心方块</li></ul>
    <ol class="decimal"><li>数字</li><li>第二项</li></ol>
    
    <h3>自定义列表样式</h3>
    <ul class="custom">
        <li>自定义项目1</li>
        <li>自定义项目2</li>
        <li>自定义项目3</li>
    </ul>
</body>
</html>

综合示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本与字体综合示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            font-size: 16px;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
            padding: 20px;
        }
        
        /* 文章容器 */
        .article {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        /* 标题样式 */
        .article h1 {
            font-size: 2rem;
            font-weight: bold;
            color: #333;
            text-align: center;
            margin-bottom: 10px;
        }
        
        .article h2 {
            font-size: 1.5rem;
            font-weight: bold;
            color: #4CAF50;
            border-bottom: 2px solid #4CAF50;
            padding-bottom: 10px;
            margin: 30px 0 20px;
        }
        
        /* 元信息 */
        .meta {
            text-align: center;
            color: #999;
            font-size: 14px;
            margin-bottom: 30px;
        }
        
        /* 段落样式 */
        .article p {
            text-indent: 2em;
            margin-bottom: 15px;
            text-align: justify;
        }
        
        /* 引用样式 */
        .quote {
            background-color: #f9f9f9;
            border-left: 4px solid #4CAF50;
            padding: 15px 20px;
            margin: 20px 0;
            font-style: italic;
            color: #666;
        }
        
        /* 高亮文本 */
        .highlight {
            background-color: #fff3cd;
            padding: 2px 5px;
            border-radius: 3px;
        }
        
        /* 代码样式 */
        code {
            font-family: 'Courier New', monospace;
            background-color: #f5f5f5;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 14px;
            color: #e91e63;
        }
        
        pre {
            background-color: #282c34;
            color: #abb2bf;
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
            margin: 15px 0;
        }
        
        pre code {
            background-color: transparent;
            color: inherit;
            padding: 0;
        }
        
        /* 列表样式 */
        .article ul, .article ol {
            margin: 15px 0;
            padding-left: 30px;
        }
        
        .article li {
            margin-bottom: 8px;
        }
        
        /* 链接样式 */
        .article a {
            color: #4CAF50;
            text-decoration: none;
            border-bottom: 1px dashed #4CAF50;
        }
        
        .article a:hover {
            color: #388E3C;
            border-bottom-style: solid;
        }
        
        /* 作者信息 */
        .author {
            text-align: center;
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }
        
        .author-name {
            font-weight: bold;
            font-size: 18px;
        }
        
        .author-title {
            color: #999;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <article class="article">
        <h1>CSS文本与字体样式指南</h1>
        <div class="meta">
            作者：张三 | 发布时间：2024年1月15日 | 阅读：1234次
        </div>
        
        <h2>引言</h2>
        <p>文本和字体样式是网页设计中最基础也是最重要的部分。良好的排版不仅能提升阅读体验，还能传达网站的品牌形象。</p>
        
        <div class="quote">
            "排版是设计的无声推销员。" — 不知名设计师
        </div>
        
        <h2>字体选择原则</h2>
        <p>选择合适的字体需要考虑以下因素：</p>
        <ul>
            <li><span class="highlight">可读性</span>：字体是否易于阅读</li>
            <li><span class="highlight">兼容性</span>：字体在不同设备上的显示效果</li>
            <li><span class="highlight">风格统一</span>：与网站整体风格是否协调</li>
            <li><span class="highlight">加载速度</span>：自定义字体的文件大小</li>
        </ul>
        
        <h2>代码示例</h2>
        <p>设置字体可以使用以下CSS代码：</p>
        <pre><code>body {
    font-family: "Microsoft YaHei", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}</code></pre>
        
        <h2>总结</h2>
        <p>掌握文本和字体样式，是成为优秀前端开发者的必经之路。更多CSS知识，请访问 <a href="#">CSS教程</a>。</p>
        
        <div class="author">
            <div class="author-name">张三</div>
            <div class="author-title">前端开发工程师</div>
        </div>
    </article>
</body>
</html>

本章小结 ​

本章我们学习了：

  1. 字体属性：font-family、font-size、font-weight、font-style
  2. 文本样式：color、text-align、text-decoration、text-transform
  3. 文本排版：text-indent、line-height、letter-spacing、word-spacing
  4. 文本阴影：text-shadow创建各种文字效果
  5. 列表样式：list-style-type、list-style-position

下一章 ​

下一章我们将学习 背景与边框，了解如何设置背景和边框效果。