04文本效果与字体

文字阴影给文字加「层次」，换行策略治好「长串撑破容器」， @font-face 让网页用上系统里没有的字体—— 排版质感的三块拼图。

约 30 分钟 5 个动手实验排版质感三拼图

一、text-shadow：文字的影子

语法和 box-shadow 是表亲：x 偏移 y 偏移模糊颜色，但没有扩散半径、没有 inset。同样支持逗号分隔的多层阴影——立体字、发光字、描边字全靠「叠加」这一个动作。

四种字效同台——把发光字的模糊半径改成 8px / 20px / 36px 看光晕扩散；把描边字的 4 个方向阴影改成纯色白边

浅色页面上的通用小技巧：text-shadow: 0 1px 0 #fff ——一道若有若无的白边，让文字在花哨背景上「浮」起来。

默认换行规则里，一个完整的「词」不允许被拆开。中文没有这个问题（每个字都能断），但英文长单词、长 URL、哈希串会一根筋撑到底，把容器顶破。两个属性对症下药：

同一串长 URL 三种策略——第一个盒子被撑破；把 .c 的 overflow-wrap 改成 break-all，看它和第二个盒子行为一样了

中文站点正文一般用 overflow-wrap: break-word（尊重词完整性）； break-all 会把英文单词拦腰斩断，仅用于 URL、编号这类无词义长串。

它管的是源码里的空格和换行怎么处理：默认（normal）全部折叠合并；pre 全部保留（像 <pre> 标签）； nowrap 一行到底不许换。五个值一张表：

注意 pre 盒子里「三个空格」和换行原样显示——把 .pre 改成 pre-wrap，看它放不下时会不会自动折行

在「布局 · 溢出处理」一课用过它，这里正式收编进文本效果家族。 单行省略号是三件套，缺一不可—— 只写 text-overflow: ellipsis 是不生效的经典大坑：

单行省略 vs 两行截断——把第二个盒子的 -webkit-line-clamp: 2 改成 3，多看一行

口诀：「nowrap 圈住，hidden 剪掉，ellipsis 补刀」。忘了前两步，省略号永远不出现。

系统里没有的字体，可以把字体文件变成网页资源：用 @font-face 注册一个自定义名字，再在 font-family 里引用。它就是「给字体上户口」：

引用时的回退链机制值得亲眼看看—— 浏览器从左往右找，找到第一个「装了」的字体就用它：

同一句话、三种字体栈——把你电脑上没装的字体放最前面，看它回退到下一个；把情绪换成「黑体 / 宋体」看气质不同

src 里 url() + format() 成对出现，浏览器跳过不认识的格式继续往下找——和第 1 课的「属性回退」是同一个思想。

字体好看，但每个字体文件都是一次网络请求。中文字体动辄几 MB（几万个字形），直接 @font-face 整包引入会让用户对着空白页面干等。实践三条路：

排版功底 = 细节克制：字号不超过 3 档、行高 1.6~1.9、正文 14~16px。你正在读的这套页面就是——衬线标题 + 无衬线正文 + line-height: 1.8。

text-shadow：x y 模糊颜色（无扩散无 inset）；多层叠加出立体 / 发光 / 描边三种字效
word-break: break-all 见缝就断；overflow-wrap: break-word 仁慈拆词（正文推荐）
white-space：nowrap 不换行、pre 全保留、pre-wrap 保留 + 折行
单行省略号三件套：nowrap + overflow: hidden + text-overflow: ellipsis；多行用 -webkit-line-clamp
@font-face：font-family 起名 + src 多格式回退（+ font-display: swap 防闪空）
字体策略：正文用系统字体栈，中文标题用子集化 web 字体；引用时永远带兜底链

动手练习：把第一节实验台里的「发光字」改成你的专属霓虹—— 换成 #C08A3E 赭金色的三层光晕，再把模糊半径改成 8px / 20px / 36px 看光晕怎么扩散；然后给第二节的 URL 盒子加上省略号三件套，做一个「不撑破也不露馅」的长链接卡片。