CSS3字体知识点大全
编程小白也能轻松掌握的CSS字体指南
CSS字体控制是网页设计中最基础也最重要的技能之一。好的字体设计能让你的网站看起来更专业、更美观。
这份指南将用最通俗易懂的语言，解释CSS3中所有与字体相关的核心知识点，每个概念都配有实际例子。
一、基础字体样式
1. font-family – 设置字体家族
定义元素内文本使用什么字体。可以指定多个字体名称作为”后备”机制。
font-family 属性应该设置几个字体选项：
- 首选字体：用户电脑上安装时会使用的字体
- 备用字体：当首选字体不可用时使用的字体
- 通用字体族：最后的安全选项（serif, sans-serif, monospace等）
/* 设置字体优先级：优先使用微软雅黑，没有就用Arial，最后用无衬线字体 */
body {
font-family: “Microsoft YaHei”, Arial, sans-serif;
}
body {
font-family: “Microsoft YaHei”, Arial, sans-serif;
}
实际效果：
这行文字使用了自定义字体（马善政手写体）
2. font-size – 字体大小
设置字体的大小。字体大小可以是绝对大小，也可以是相对大小。
常用单位：
- px：像素（绝对大小）
- em：相对于当前元素的字体大小
- rem：相对于根元素(html)的字体大小
- %：相对于父元素的字体大小
- vw/vh：相对于视口宽度/高度的1%
h1 { font-size: 2.5rem; } /* 约40px */
p { font-size: 1.1em; } /* 相对于父元素字体大小 */
.small { font-size: 85%; } /* 父元素字体的85% */
.responsive { font-size: 4vw; } /* 响应式字体 */
p { font-size: 1.1em; } /* 相对于父元素字体大小 */
.small { font-size: 85%; } /* 父元素字体的85% */
.responsive { font-size: 4vw; } /* 响应式字体 */
二、字体样式细节
3. font-weight – 字体粗细
设置文本的粗细程度。常用值有：
- normal：正常粗细（400）
- bold：粗体（700）
- lighter：比父元素更细
- bolder：比父元素更粗
- 100-900：数值定义（100最细，900最粗）
.light-text { font-weight: 300; }
.normal-text { font-weight: normal; }
.bold-text { font-weight: bold; }
.extra-bold { font-weight: 800; }
.normal-text { font-weight: normal; }
.bold-text { font-weight: bold; }
.extra-bold { font-weight: 800; }
4. font-style – 字体风格
设置文本的样式，主要用于斜体文本：
- normal：正常显示
- italic：斜体（优先使用字体的斜体版本）
- oblique：倾斜文本（普通文本的倾斜版本）
.normal { font-style: normal; }
.italic { font-style: italic; }
.oblique { font-style: oblique 14deg; } /* CSS4新增角度值 */
.italic { font-style: italic; }
.oblique { font-style: oblique 14deg; } /* CSS4新增角度值 */
三、高级字体特性
5. @font-face – 自定义字体
将自定义字体嵌入到网页中，不再依赖用户电脑上的字体：
- 支持多种字体格式：WOFF, WOFF2, TTF, EOT等
- WOFF2是目前最推荐的格式（压缩率高）
- 需要提供不同格式以兼容所有浏览器
@font-face {
font-family: ‘MyCustomFont’;
src: url(‘myfont.woff2’) format(‘woff2’),
url(‘myfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}
body {
font-family: ‘MyCustomFont’, sans-serif;
}
font-family: ‘MyCustomFont’;
src: url(‘myfont.woff2’) format(‘woff2’),
url(‘myfont.woff’) format(‘woff’);
font-weight: normal;
font-style: normal;
}
body {
font-family: ‘MyCustomFont’, sans-serif;
}
6. text-shadow – 文字阴影
给文字添加阴影效果，可以创建多个阴影（逗号分隔）：
语法：text-shadow: h-shadow v-shadow blur-radius color;
- h-shadow：水平阴影位置（必需）
- v-shadow：垂直阴影位置（必需）
- blur-radius：模糊距离（可选）
- color：阴影颜色（可选）
/* 简单阴影 */
.shadow1 { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
/* 多重阴影效果 */
.shadow2 {
text-shadow: 0 0 5px #fff, 0 0 10px #00eaff, 0 0 15px #008cff;
}
.shadow1 { text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
/* 多重阴影效果 */
.shadow2 {
text-shadow: 0 0 5px #fff, 0 0 10px #00eaff, 0 0 15px #008cff;
}
实际效果：
多彩文字阴影
四、文本处理技巧
7. text-overflow – 文本溢出处理
当文本溢出包含元素时如何显示：
- clip：直接裁剪文本
- ellipsis：显示省略号(…)
- 需要配合white-space: nowrap;和overflow: hidden;使用
.truncate {
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 显示省略号 */
}
white-space: nowrap; /* 禁止换行 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 显示省略号 */
}
8. word-break & word-wrap – 单词换行
控制长单词或URL地址的换行方式：
word-break：
- normal：默认换行规则
- break-all：允许在任意字符间断行
- keep-all：只能在半角空格或连字符处换行（主要用于中文）
word-wrap (overflow-wrap)：
- normal：只在允许的断点换行
- break-word：当单词太长时，在单词内部换行
/* 允许长单词内部换行 */
.break-word {
word-wrap: break-word;
}
/* 中文换行处理 */
.chinese-text {
word-break: break-all;
}
.break-word {
word-wrap: break-word;
}
/* 中文换行处理 */
.chinese-text {
word-break: break-all;
}