解决 CSS 渐变文字裁切问题：适配自定义字体完整方案
使用 -webkit-background-clip: text 实现文字渐变时，部分自定义字体（如 The Sunset）因字形边界溢出导致右侧字符被裁切；本文提供兼容性好、无需 JS 的纯 CSS 修复方案，并附最佳实践建议。
使用 `-webkit-background-clip: text` 实现文字渐变时，部分自定义字体（如 the sunset）因字形边界溢出导致右侧字符被裁切；本文提供兼容性好、无需 js 的纯 css 修复方案，并附最佳实践建议。
当为文字应用 background-clip: text + color: transparent 渐变效果时，浏览器会依据字体的逻辑字形边界（glyph bounding box） 进行裁剪——而非视觉渲染区域。某些手写体或装饰性字体（如 The Sunset）的右向延伸笔画（例如小写字母 t 的末尾横线）常超出标准字距边界，导致 background-clip 将其截断，表现为文字右侧“被削掉”。
✅ 核心修复：强制扩展容器宽度与对齐
只需在渐变文字元素上添加以下两项关键声明，即可彻底解决裁切：
.container .block2 { /* ...原有样式... */ width: 100%; /* 关键：确保背景裁剪区域覆盖完整内容宽度 */ text-align: center; /* 配合居中布局，避免左侧偏移引发新问题 */}
width: 100% 的作用是让元素的盒模型宽度严格匹配父容器，从而扩大 background-clip: text 的计算范围——使渐变背景能完整覆盖所有视觉字形，包括那些“越界”的笔画。
? 补充说明：若元素处于 position: absolute（如本例），还需确保其父容器（.block1）具有明确宽度（例如 width: 100% 或 left/right 定义），否则 100% 可能失效。推荐显式设置：
立即学习“前端免费学习笔记（深入）”；
.container .block1 { width: 100%; /* ...其他样式... */}
✅ 进阶优化：字体加载与渲染稳定性
自定义字体易引发布局偏移（FOIT/FOUT），加剧裁切感知。建议在 @font-face 中启用 font-display: swap 并指定 font-weight/font-style：
@font-face { font-family: 'The Sunset'; src: url('The-Sunset.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; /* 确保文本及时显示，避免空白期 */}
同时，在 CSS 中显式声明 font-weight（即使字体本身无粗细变体），可避免浏览器默认加粗导致字形膨胀：
.container .block2 { font-weight: 400; /* 显式重置，防止意外加粗 */}
⚠️ 注意事项与替代方案对比
| 方案 | 优点 | 缺点 | 推荐度 |
|---|---|---|---|
| width: 100% + text-align（本文方案） | 纯 CSS、零 JS 依赖、兼容性好（Chrome/Safari/Firefox/Edge 均支持） | 需确保父容器宽度可控 | ⭐⭐⭐⭐⭐ |
| SVG <text> + linearGradient | 渲染最精准，完全规避字体边界问题 | 语义性弱、SEO 不友好、响应式维护成本高 | ⭐⭐⭐ |
| Canvas 绘制文字 | 完全可控、支持复杂特效 | 开发复杂、无障碍支持差、无法选择复制 | ⭐⭐ |
? 重要提醒：避免使用 letter-spacing 或 margin-right “强行撑开”右侧空间——这会破坏文字流式布局，且在不同字号/缩放下表现不稳定。
✅ 最佳实践建议（针对初学者）
- 命名规范：font-family 名称应与字体文件实际名称一致（如 "The Sunset" 而非 "Bingo"），避免混淆；
- 字体格式：优先提供 .woff2（现代浏览器压缩率高），辅以 .woff 保障旧版兼容；
- 调试技巧：临时添加 border: 1px solid red 到 .block2，直观查看元素真实尺寸与裁切关系；
- 响应式适配：对大字号（如 150px）添加媒体查询，移动端建议降至 clamp(3rem, 8vw, 6rem) 动态缩放。
最终，你完全可以坚持使用心仪字体——问题不在字体本身，而在 CSS 渲染机制的细节。通过精准控制容器宽度与字体加载行为，即可优雅实现既美观又稳健的渐变文字效果。
