当前位置：首页 > article >正文

CSS 文字样式全解析：从基础排版到视觉层次设计

article 2025/9/15 5:53:50

CSS 文字样式目录

一、字体家族（font-family）

二、字体大小（font-size）

三、字体粗细（font-weight）

四、字体样式（font-style）

五、文本转换（text-transform）

六、文本装饰（text-decoration）

七、文本对齐（text-align）

八、文本缩进（text-indent）

九、行高（line-height）

十、字母间距（letter-spacing）

十一、单词间距（word-spacing）

十二、文本阴影（text-shadow）

十三、文字溢出处理（text-overflow）

十四、简写属性：font

十五、实战案例与视觉效果

十六、性能优化与最佳实践

每个属性都有相应的案例，后期的文章也会根据这些基础来进行实际案例的制作，所以不要落下这些知识点！

一、字体家族（font-family）

作用：指定文本的字体类型，是文字样式中最基础的属性。
为什么重要：不同字体传达不同的情感和风格，例如：

无衬线字体（如 Arial）现代简洁，适合科技产品
衬线字体（如 Times New Roman）传统优雅，适合书籍排版
等宽字体（如 Consolas）代码清晰，适合编程界面

取值规则：

通用字体族（兜底方案）：
- sans-serif（无衬线字体，如 Arial）
- serif（衬线字体，如 Times New Roman）
- monospace（等宽字体，如 Courier New）
- cursive（手写体，如 Comic Sans MS）
- fantasy（装饰性字体，如 Impact）
具体字体名称：
- 必须使用引号包裹包含空格的字体名，例如："Times New Roman"
- 优先使用系统预装字体，提高兼容性
多字体后备机制：
用逗号分隔多个字体，浏览器按顺序尝试，找不到则使用下一个。

css
```
body {font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
```

字体加载策略：

系统字体（最快）：利用用户设备预装字体，无需网络加载。
css
```
body {font-family: system-ui, sans-serif;  /* 现代系统默认字体 */
}
```

Web 字体（需加载）：通过网络引入自定义字体，如 Google Fonts。

html

预览

<!-- 引入Inter字体 -->
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet">

二、字体大小（font-size）

作用：控制文本的物理尺寸，直接影响可读性。
为什么重要：

正文字体太小会导致阅读疲劳
标题字体太大会破坏页面平衡

单位类型详解：

绝对单位：
- px（像素）：固定大小，1px = 屏幕的 1 个物理像素点。
  css
```
p { font-size: 16px; }  /* 最常用的正文大小 */
```
- pt（点）：印刷单位，1pt ≈ 1.33px，常用于打印样式。

相对单位：

em：相对于父元素的字体大小。

css

.parent { font-size: 20px; }
.child { font-size: 0.8em; }  /* 实际大小：20px × 0.8 = 16px */

rem：相对于根元素（<html>）的字体大小。

css

html { font-size: 16px; }
.element { font-size: 1.5rem; }  /* 实际大小：16px × 1.5 = 24px */

%：相对于父元素的百分比。

css

.parent { font-size: 20px; }
.child { font-size: 80%; }  /* 实际大小：20px × 80% = 16px */

视口单位：
- vw：相对于视口宽度的百分比（1vw = 视口宽度的 1%）。
  css
```
h1 { font-size: 5vw; }  /* 始终是视口宽度的5% */
```
- vh：相对于视口高度的百分比。

动态单位（CSS3）：

clamp(min, preferred, max)：设置字体大小的范围。

css

h1 {font-size: clamp(1.5rem, 3vw, 2.5rem);  /* 最小24px，首选3%视口宽度，最大40px */
}

最佳实践：

根元素设置基准大小：

css

html {font-size: 16px;  /* 浏览器默认值，可根据需要调整 */
}

正文使用 rem 或 px，标题使用 clamp() 实现响应式

三、字体粗细（font-weight）

作用：控制字体的粗细程度，增强文本层次。
取值方式：

关键词：
- normal（等同于 400）
- bold（等同于 700）
- bolder（比父元素更粗）
- lighter（比父元素更细）
数字值：
- 100（极细）
- 200（超轻）
- 300（轻）
- 400（正常，等同于 normal）
- 500（中等）
- 600（半粗）
- 700（粗，等同于 bold）
- 800（超粗）
- 900（极粗）

示例：

css

.heading {font-weight: 700;  /* 粗体标题 */
}
.subheading {font-weight: 500;  /* 中等粗细副标题 */
}

注意事项：

并非所有字体都支持全部 9 个粗细级别，需查看字体文档确认
使用 font-weight: 900 时需谨慎，可能导致文字过黑影响可读性

四、字体样式（font-style）

作用：设置字体的倾斜状态，常用于强调文本。
取值选项：

normal（默认，正常字体）
italic（使用字体的斜体版本，如存在）
oblique（强制倾斜文本，即使字体没有斜体版本）

区别解析：

italic 使用字体的官方斜体设计，通常更美观
oblique 是算法倾斜，可能不如官方斜体自然

示例：

css

.emphasis {font-style: italic;  /* 使用斜体强调 */
}
.oblique-text {font-style: oblique;  /* 强制倾斜 */
}

应用场景：

书籍标题、电影名称常用斜体
法律条款、学术引用常用斜体强调

五、文本转换（text-transform）

作用：自动转换文本的大小写，无需修改 HTML 内容。
取值选项：

none（默认，不转换）
uppercase（全部大写）
lowercase（全部小写）
capitalize（每个单词的首字母大写）

示例：

css

.title {text-transform: uppercase;  /* 标题全部大写 */
}
.email {text-transform: lowercase;  /* 邮箱地址全部小写 */
}
.name {text-transform: capitalize;  /* 姓名首字母大写 */
}

注意事项：

仅改变显示效果，不影响实际文本内容
全部大写会降低可读性，建议标题使用，正文慎用

六、文本装饰（text-decoration）

作用：添加或移除文本的装饰线，常用于链接或标记文本。
取值选项：

none（默认，无装饰线）
underline（下划线）
overline（上划线）
line-through（删除线）
blink（闪烁效果，已弃用，不建议使用）

复合属性语法：
text-decoration: [line] [style] [color];

示例：

css

.link {text-decoration: none;  /* 移除链接下划线 */
}
.sale-item {text-decoration: line-through red;  /* 红色删除线 */
}
.underline-dotted {text-decoration: underline dotted blue;  /* 蓝色点状下划线 */
}

应用场景：

链接默认有下划线，可通过 none 移除
删除线用于表示价格折扣或过时信息

七、文本对齐（text-align）

作用：控制文本的水平对齐方式，影响段落的整体排版。
取值选项：

left（左对齐，默认值，符合大多数语言阅读习惯）
right（右对齐，常用于阿拉伯语等从右到左的语言）
center（居中对齐，常用于标题、导航栏）
justify（两端对齐，使每行宽度均匀，常用于印刷媒体）
start（与书写方向起始端对齐，如 LTR 语言为左对齐）
end（与书写方向结束端对齐，如 LTR 语言为右对齐）

示例

css

.header {text-align: center;  /* 标题居中 */
}
.paragraph {text-align: justify;  /* 段落两端对齐 */
}
.right-align {text-align: right;  /* 右对齐文本 */
}

注意事项：

两端对齐可能导致单词间距不均匀，需配合 word-spacing 优化
移动端慎用 justify，小屏幕上易导致阅读困难

八、文本缩进（text-indent）

作用：设置段落首行的缩进距离，常用于印刷排版和长文本。
取值方式：

长度单位（如 2em、30px）
百分比（相对于父元素宽度）

示例：

css

.article p {text-indent: 2em;  /* 首行缩进2个字符 */
}
.quote {text-indent: -0.5em;  /* 悬挂缩进（首行突出） */
}

应用场景：

中文段落传统上使用 2 个字符的缩进
诗歌、引用文本常使用悬挂缩进

九、行高（line-height）

作用：控制文本行与行之间的垂直间距，直接影响可读性。
取值方式：

无单位数字（如 1.5，推荐方式）
百分比（如 150%）
长度单位（如 24px）

示例：

css

body {line-height: 1.6;  /* 推荐的正文行高，增加可读性 */
}
h1 {line-height: 1.2;  /* 标题行高通常较小，增强紧凑感 */
}
.compact-text {line-height: 1.1;  /* 紧凑文本，如广告标语 */
}

最佳实践：

使用无单位数字值（如 1.5），避免继承问题
正文推荐行高：1.5 - 1.8
标题推荐行高：1.2 - 1.4

十、字母间距（letter-spacing）

作用：调整字符之间的间距，用于增强可读性或创造特殊效果。
取值方式：

长度单位（如 0.5px, 0.1em）
normal（默认间距，取决于字体设计）
负值（缩小间距，但可能导致可读性下降）

示例：

css

.uppercase-title {letter-spacing: 2px;  /* 增加大写字母间距，提高可读性 */
}
.tight-text {letter-spacing: -0.5px;  /* 减小间距，创造紧凑感 */
}

应用场景：

大标题常增加字母间距，增强视觉冲击力
全大写文本需增加间距，避免字符粘连

十一、单词间距（word-spacing）

作用：调整单词之间的间距，常用于优化排版效果。
取值方式：与 letter-spacing 相同。

示例：

css

.justified-text {word-spacing: 0.1em;  /* 优化两端对齐文本的单词间距 */
}
.spacious-text {word-spacing: 3px;  /* 增加单词间距，适用于标语 */
}

注意事项：

过大的单词间距会导致阅读障碍
通常配合 text-align: justify 使用

十二、文本阴影（text-shadow）

作用：为文本添加阴影效果，增强层次感和视觉冲击力。
语法：
text-shadow: h-shadow v-shadow blur-radius color;

参数解析：

h-shadow：水平阴影偏移（正值向右，负值向左）
v-shadow：垂直阴影偏移（正值向下，负值向上）
blur-radius：阴影模糊半径（可选，值越大越模糊）
color：阴影颜色（可选，默认继承文本颜色）

示例：

css

.hero-title {text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);  /* 基础阴影效果 */
}
.glow-effect {text-shadow: 0 0 10px #fff, 0 0 20px #fff;  /* 发光效果 */
}
.retro-text {text-shadow: 3px 3px 0 #000,-1px -1px 0 #000,  1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;  /* 复古描边效果 */
}

十三、文字溢出处理（text-overflow）

作用：控制文本溢出容器时的显示方式，常用于单行文本。
取值选项：

clip（直接裁剪溢出内容，不显示任何提示）
ellipsis（显示省略号 ... 表示内容被截断）

必要配合属性：

css

.overflow-text {white-space: nowrap;  /* 禁止换行，保持单行 */overflow: hidden;  /* 隐藏溢出内容 */text-overflow: ellipsis;  /* 显示省略号 */max-width: 200px;  /* 限制容器宽度 */
}

多行文本溢出（CSS3）：

css

.multiline-ellipsis {display: -webkit-box;-webkit-line-clamp: 3;  /* 限制显示3行 */-webkit-box-orient: vertical;overflow: hidden;
}

十四、简写属性：font

作用：一次性设置多个字体相关属性，提高代码简洁性。
语法：
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

必须包含的属性：

font-size 和 font-family 是必需的，其他可选
各属性顺序不固定，但 font-size 和 font-family 必须按此顺序最后出现

示例：

css

.small-bold {font: bold 14px/1.5 Arial, sans-serif;  /* 粗体，14px，行高1.5，Arial字体 */
}
.italic-text {font: italic 1.2em "Times New Roman", serif;  /* 斜体，1.2em，Times New Roman字体 */
}

注意事项：

未指定的属性将使用默认值（如 font-style 默认 normal）
font-size 和 line-height 之间必须用 / 分隔

十五、实战案例与视觉效果

案例 1：分层文本阴影（3D 效果）

css

.three-d-text {font-size: 3rem;font-weight: bold;color: #fff;text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);
}

案例 2：响应式排版系统

css

/* 基础设置 */
html {font-size: 16px;  /* 基准字体大小 */
}/* 标题层级 */
h1 {font-size: clamp(2.5rem, 5vw, 4rem);  /* 响应式超大标题 */font-weight: 800;line-height: 1.1;margin-bottom: 0.5em;
}h2 {font-size: clamp(1.75rem, 3vw, 2.5rem);  /* 响应式大标题 */font-weight: 700;line-height: 1.2;margin-bottom: 0.5em;
}/* 正文文本 */
p {font-size: 1rem;line-height: 1.6;max-width: 65ch;  /* 限制每行字符数为65个，提高可读性 */margin-bottom: 1em;
}/* 移动端调整 */
@media (max-width: 768px) {html {font-size: 14px;  /* 小屏幕减小基准字体大小 */}
}

十六、性能优化与最佳实践

减少字体加载数量：
- 限制每个网站使用的字体族数量（建议不超过 3 个）
- 只加载需要的字体粗细和样式（如只加载 400 和 700）

字体预加载：

html

预览

<link rel="preload" href="fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

使用现代字体格式：
- 优先使用 WOFF2 格式（现代浏览器支持，压缩率高）
- 提供 WOFF 作为后备格式

优化文本渲染：

css

body {-webkit-font-smoothing: antialiased;  /* 优化iOS和Mac的字体渲染 */-moz-osx-font-smoothing: grayscale;   /* 优化Firefox的字体渲染 */
}

建立排版系统：
使用 CSS 变量定义字体样式，保持一致性：

css

:root {--font-primary: 'Inter', sans-serif;--font-secondary: 'Georgia', serif;--text-base: 1rem;--text-lg: 1.25rem;--text-xl: 1.5rem;
}

通过系统掌握这些文字样式属性，你可以创建出既美观又易读的网页排版。建议在实际项目中建立一套统一的字体规范，并使用工具（如 Figma、Sketch）进行视觉设计验证。

CSS 文字样式全解析：从基础排版到视觉层次设计

CSS 文字样式目录一、字体家族（font-family） 二、字体大小（font-size） 三、字体粗细（font-weight） 四、字体样式（font-style） 五、文本转换（text-transform&#xf…...

编程日记 2025/9/13 8:26:53

【高德开放平台-注册安全分析报告】

前言由于网站注册入口容易被黑客攻击，存在如下安全问题： 暴力破解密码，造成用户信息泄露短信盗刷的安全问题，影响业务及导致用户投诉带来经济损失，尤其是后付费客户，风险巨大，造成亏损无底洞…...

编程日记 2025/9/13 6:39:11

[特殊字符] React Fiber架构与Vue设计哲学撕逼实录

1. React这逼为什么搞Fiber？ 他妈的DOM树太深：16版本前递归遍历组件树就像便秘，卡得页面直接阳痿调度器不给力：老子要打断渲染过程搞优先级调度，旧架构跟智障一样只会死循环增量渲染需求：Fiber链表结构让老…...

编程日记 2025/9/6 11:26:42

RabbitMQ的简介

三个概念生产者：生产消息的服务消息代理：消息中间件，如RabbitMQ消费者：获取使用消息的服务消息队列到达消费者的两种形式队列（queue）:点对点消息通信（point-to-point） 消息进入队…...

编程日记 2025/9/13 7:35:25

混合学习：Bagging与Boosting的深度解析与实践指南

引言在机器学习的世界里，模型的性能优化一直是研究的核心问题。无论是分类任务还是回归任务，我们都希望模型能够在新的数据上表现出色，即具有良好的泛化能力。然而，实际应用中常常遇到模型过拟合（高方差）…...

编程日记 2025/7/11 22:42:38

使用Gemini, LangChain, Gradio打造一个书籍推荐系统（第一部分）

第一部分：数据处理 import kagglehub# Download latest version path kagglehub.dataset_download("dylanjcastillo/7k-books-with-metadata")print("Path to dataset files:", path)自动下载该数据集的最新版本并返回本地保存的路径 impo…...

编程日记 2025/9/12 20:25:05

大语言模型 16 - Manus 超强智能体 Prompt分析原理分析包含工具列表分析

写在前面 Manus 是由中国初创公司 Monica.im 于 2025 年 3 月推出的全球首款通用型 AI 智能体（AI Agent），旨在实现“知行合一”，即不仅具备强大的语言理解和推理能力，还能自主执行复杂任务，直接交付完整成…...

编程日记 2025/9/12 22:12:58

物联网赋能7×24H无人值守共享自习室系统设计与实践！

随着"全民学习"浪潮的兴起，共享自习室市场也欣欣向荣，今天就带大家了解下在物联网的加持下，无人共享自习室系统的设计与实际方法。一、物联网系统整体架构 1.1 系统分层设计层级技术组成核心功能用户端微信小程序/H5预约选座、…...

编程日记 2025/9/6 2:24:56

以太联Intellinet带您深度解析PoE交换机的上行链路端口(Uplink Ports)

在当今网络技术日新月异的时代，以太网供电(PoE)交换机已然成为现代网络连接解决方案中不可或缺的“利器”。它不仅能够出色地完成数据传输任务，还能为所连接的设备提供电力支持，彻底摆脱了单独电源适配器的束缚，让网络部署更加简洁…...

编程日记 2025/9/7 19:25:46

浏览器播放 WebRTC 视频流

源码（vue） <template><video ref"videoElement" class"video" autoplay muted playsinline></video> </template><script setup lang"ts">import { onBeforeUnmount, onMounted, ref } fr…...

编程日记 2025/9/5 12:37:37

从零开始：使用 PyTorch 构建深度学习网络

从零开始：使用 PyTorch 构建深度学习网络目录 PyTorch 简介环境配置PyTorch 基础构建神经网络训练模型评估与测试案例实战：手写数字识别进阶技巧常见问题解答 PyTorch 简介 PyTorch 是一个开源的深度学习框架，由 Facebook（现…...

编程日记 2025/9/4 9:10:09

分类算法 Kmeans、KNN、Meanshift 实战

任务 1、采用 Kmeans 算法实现 2D 数据自动聚类，预测 V180,V260 数据类别； 2、计算预测准确率，完成结果矫正 3、采用 KNN、Meanshift 算法，重复步骤 1-2 代码工具：jupyter notebook 视频资料无监督学习&#xff…...

编程日记 2025/9/13 1:27:26

【razor】回环结构导致的控制信令错位：例如发送端收到 SR的问题

一、razor的echo程序根据对 yuanrongxi/razor 仓库的代码和 echo 测试程序相关实现的分析，下面详细解读 echo 程序中 RTCP sender report（SR）、receiver report（RR）回显的问题及项目的解决方式。 1. 问题背景在 RTP/RTCP 体系下，SR（Sender Report）由发送端周期性发…...

编程日记 2025/6/20 13:51:19

网络安全之身份验证绕过漏洞

漏洞简介 CrushFTP 是一款由 CrushFTP LLC 开发的强大文件传输服务器软件，支持FTP、SFTP、HTTP、WebDAV等多种协议，为企业和个人用户提供安全文件传输服务。近期，一个被编号为CVE-2025-2825的严重安全漏洞被发现，该漏洞影响版本1…...

编程日记 2025/9/12 13:01:21

MySQL 主从复制搭建全流程：基于 Docker 与 Harbor 仓库

一、引言在数据库管理中，MySQL 主从复制是一种非常重要的技术，它可以实现数据的备份、读写分离，减轻主数据库的压力。本文将详细介绍如何使用 Docker 和 Harbor 仓库来搭建 MySQL 主从复制环境，适合刚接触数据库和 Docker 的新手…...

编程日记 2025/9/7 19:20:28

vscode打开vue + element项目

好嘞，我帮你详细整理一个用 VS Code 来可视化开发 Vue Element UI 的完整步骤，让你能舒服地写代码、预览界面、调试和管理项目。用 VS Code 可视化开发 Vue Element UI 全流程指南一、准备工作安装 VS Code 官网下载安装：https://code…...

编程日记 2025/9/4 17:23:13

Django框架的前端部分使用Ajax请求一

Ajax请求目录 1.ajax请求使用 2.增加任务列表功能(只有查看和新增) 3.代码展示集合这篇文章, 要开始讲关于ajax请求的内容了。这个和以前文章中写道的Vue框架里面的axios请求, 很相似。后端代码, 会有一些细节点, 跟前几节文章写的有些区别。一、ajax请求使用我们先…...

编程日记 2025/9/13 2:45:18

cmd如何从C盘默认路径切换到D盘某指定目录

以从C盘cmd打开后的默认目录切换到目录"D:\Program Files\MySQL\MySQL Server 8.0\bin\mysqld"为例打开cmd 首先点击开始键，搜索cms，右键以管理员身份运行打开管理员端的命令行提示符 1、首先要先切换到D盘直接输入D:然后回车就可以&…...

编程日记 2025/9/7 19:28:40

693SJBH基于.NET的题库管理系统

计算机与信息学院本科毕业论文（设计）开题报告论文中文题目基于asp.net的题库管理系统设计与实现论文英文题目 Asp.net based database management system design and Implementation 学生姓名专业班级 XXXXXX专业08　班 ⒈选题的背景和意…...

编程日记 2025/8/4 15:54:19

[Vue]跨组件传值

父子组件传值详情可以看文章跨组件传值 Vue 的核⼼是单向数据流。所以在父子组件间传值的时候，数据通常是通过属性从⽗组件向⼦组件，⽽⼦组件通过事件将数据传递回⽗组件。多层嵌套场景⼀般使⽤链式传递的⽅式实现provideinject的⽅式适⽤于需要跨层级…...

编程日记 2025/6/17 0:28:25

每日Prompt：实物与手绘涂鸦创意广告

提示词一则简约且富有创意的广告，设置在纯白背景上。一个真实的 [真实物体] 与手绘黑色墨水涂鸦相结合，线条松散而俏皮。涂鸦描绘了：[涂鸦概念及交互：以巧妙、富有想象力的方式与物体互动]。在顶部或中部加入粗体黑色 [广告文案…...

编程日记 2025/9/7 19:23:16

学习笔记：黑马程序员JavaWeb开发教程(2025.4.8)

12.11 登录校验-Filter-详解（过滤器链） 过滤器链及其执行顺序，一个Filter一个过滤器链，类名排名越靠前（按照ABC这样的顺序），就先执行谁 12.12 登录校验-Filter-登录校验过滤器获取请求参数&…...

编程日记 2025/9/13 2:02:10

vue3 在线播放语音 mp3

播放、暂停、停止 <template><div><button click"togglePlay">{{ isPlaying ? "暂停" : "播放" }}</button><button click"stopAudio">停止</button><p>播放进度：{{ Math.rou…...

编程日记 2025/8/3 15:51:53

Ubuntu部署私有Gitlab

这个东西安装其实挺简单的，但是因为我这边迁移了数据目录和使用自己安装的 nginx 代理还是踩了几个坑，所以大家可以注意下先看下安装 # 先安装必要组件 sudo apt update sudo apt install -y curl openssh-server ca-certificates tzdata perl# 添加gi…...

编程日记 2025/9/12 19:23:13

genicamtl_lmi_gocator_objectmodel3d

目录一、在halcon中找不到genicamtl_lmi_gocator_objectmodel3d例程二、在halcon中运行genicamtl_lmi_gocator_objectmodel3d，该如何配置三、代码分段详解（一）传感器连接四、代码分段详解（二）采集图像并显示五、代码分段详解（三）坐标变换六、常见问题一、在halcon中找不…...

编程日记 2025/9/12 13:31:29