本文介绍通过自定义 CSS 调整 VitePress 默认主题首页 Hero 区域中大标题（hero.text）的字间距与布局，解决文字拥挤、显示局促的问题，提升可读性与视觉层次。
本文介绍通过自定义 css 调整 vitepress 默认主题首页 hero 区域中大标题（`hero.text`）的字间距与布局，解决文字拥挤、显示局促的问题，提升可读性与视觉层次。
VitePress 默认主题的首页 Hero 区域（即 layout: home 所渲染的顶部横幅）将 hero.text 渲染为一个居中、加粗、响应式缩放的大号文本块。但其默认样式未预留足够字间距与行内呼吸感，尤其当文本较长（如你案例中的法语长句 "Analyse du code du TP2 de Breno Mazzali Medeiros Tomazelli et de Philippe Bouchard"）时，容易出现视觉“ cramped ”（拥挤压缩）效果。
要从根本上改善显示空间，推荐采用主题级 CSS 覆盖方案——这比内联样式或全局 style.css 更精准、更易维护。
✅ 正确做法：在自定义主题中注入 CSS
首先确保你已启用自定义主题模式（若尚未启用，请运行 npm create vitepress@latest 并在初始化向导中选择 Custom theme）。完成后，项目中将存在 .vitepress/theme/index.ts 及配套的 .vitepress/theme/style.css（或直接在 index.ts 中导入样式）。
在 .vitepress/theme/style.css 中添加如下规则：
/* 优化 Hero 文本区域：增大字间距、增强可读性 */
div.VPHero.VPHomeHero > div > div > .text {
word-spacing: 32px; /* 推荐 24–40px 区间，按需微调 */
letter-spacing: 0.02em; /* 可选：轻微增加字母间距，提升清晰度 */
line-height: 1.3; /* 避免多行时行距过紧 */
}? 选择器说明：
div.VPHero.VPHomeHero > div > div > .text是 VitePress v1.x 默认主题中hero.text的精确 DOM 路径（经实际结构验证）。它确保样式仅作用于首页 Hero 主文本，不影响其他页面或组件。
⚠️ 注意事项
- ❌ 不要直接修改
node_modules/vitepress/...中的源码 —— 升级后会被覆盖； - ❌ 避免使用
!important—— 正确的 CSS 优先级和路径已足够； - ✅ 若需适配移动端，可添加媒体查询：
@media (max-width: 768px) { div.VPHero.VPHomeHero > div > div > .text { word-spacing: 16px; font-size: 1.5rem; } } - ✅ 支持更多定制？还可扩展控制
font-weight、max-width或添加text-shadow提升对比度。
✅ 效果验证
保存样式后重启开发服务器（npm run dev），刷新首页即可看到文字明显舒展、节奏更从容。相比原始截图中密集堆叠的单词，调整后文本具备更好的视觉重量与阅读引导性。
总结：VitePress 的灵活性正体现在其“约定优于配置”的主题机制上——通过轻量级 CSS 覆盖，你无需改动任何 Vue 组件逻辑，即可专业、可持续地优化关键界面体验。
