CSS 文字样式目录
每个属性都有相应的案例，后期的文章也会根据这些基础来进行实际案例的制作，所以不要落下这些知识点！
一、字体家族（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）进行视觉设计验证。
扫一扫
931
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
