CSS 课堂笔记：文本样式与自定义字体

CSS 课堂笔记：文本样式与自定义字体

一、文本基础样式（div 综合案例）

1. 字体与字号

• font-size: 16px：设置文字大小为 16 像素，这是网页默认的字号基准。
• font-family: "微软雅黑"：指定使用微软雅黑字体，这是 Windows 系统常用的无衬线字体，适合屏幕阅读。

2. 首行缩进（text-indent）

• text-indent: 2em：让段落首行缩进 2 个字符。
• em 是相对单位，相对于当前元素的 font-size。这里 1em = 16px，所以 2em = 32px，正好缩进两个汉字的位置。
• 常用于中文段落排版，模仿纸质书的缩进习惯。

3. 字体粗细（font-weight）

• font-weight: 900：设置字体为最粗级别。
• 常用值：100（细体）→ 400（正常）→ 700（加粗）→ 900（特粗）。数字越大越粗。

4. 单行省略号四件套（重点）

这是处理单行文本溢出的标准组合：

属性	值	作用
white-space	nowrap	强制文字不换行，所有内容挤在一行
overflow	hidden	超出容器宽度的内容直接裁剪隐藏
text-overflow	ellipsis	在裁剪位置显示 … 省略号
（配合）width 或 max-width	固定宽度	容器必须有宽度限制，否则不会溢出

核心逻辑：先不让换行 → 超出部分隐藏 → 在末尾加省略号。

二、行内元素样式（span）

斜体（font-style）

• font-style: italic：让文字变为斜体。
• 适用于强调、书名、外文词汇等场景。
• 在本例中，<span> 标签包裹的"根本性问题"会显示为斜体，而其他普通文本保持正常。

三、自定义字体（@font-face）

1. 为什么要用自定义字体？

网页默认只能使用用户电脑上已安装的字体（如微软雅黑、宋体、Arial 等）。如果想用特殊艺术字体（如手写体、书法体），就需要通过 @font-face 从服务器加载字体文件。

2. 注册字体的语法

text

@font-face {
  font-family: "自定义字体名称";    /* 给字体起别名，方便引用 */
  src: url(字体文件路径);           /* 指定 .TTF / .woff / .woff2 文件位置 */
}

3. 应用自定义字体

• 在需要使用的选择器中，font-family 设置为刚才注册的名字即可。
• 例如 #font { font-family: "汉呈王天喜江南手书"; }，该 ID 对应的元素就会显示该手写字体。

4. 优先级规则（重要）

• 内联样式（写在标签里的 style）优先级最高。
• 其次是 ID 选择器（如 #font）。
• 再其次是 类选择器（如 .title）和 标签选择器（如 div）。
• 本例中：普通 div 使用默认的"微软雅黑"，而带有 id="font" 的 div 会覆盖为自定义手写字体，因为 ID 选择器优先级高于标签选择器。

四、课堂要点速记

1. 单行省略号 vs 多行省略号区别

对比维度	单行省略号	多行省略号
核心属性	white-space: nowrap	display: -webkit-box + -webkit-line-clamp: 3
适用范围	标题、标签、导航文字	文章摘要、商品描述
省略号位置	同一行末尾	最后一行末尾

2. em 单位的妙用

• text-indent: 2em 缩进两个汉字位置，因为汉字宽度通常等于 1em。
• 如果字号改变，缩进会自动跟随调整，非常灵活。

3. 字体加载注意事项

• 字体文件（.TTF）通常较大，会影响页面加载速度，建议使用压缩格式（.woff2）。
• 如果字体文件加载失败，浏览器会降级使用 font-family 中后面的备选字体。
• 中文自定义字体文件往往很大（几 MB 到十几 MB），实际项目中应谨慎使用或做字体子集化处理。

4. 权重记忆口诀

内联 > ID > 类 > 标签，权重越高越优先。