本文介绍如何通过自定义 css 调整 vitepress 默认主题中首页 hero 区域的文字排版，解决标题文字拥挤、行距过紧、视觉空间局促等问题，提升大屏展示效果与可读性。
本文介绍如何通过自定义 css 调整 vitepress 默认主题中首页 hero 区域的文字排版，解决标题文字拥挤、行距过紧、视觉空间局促等问题，提升大屏展示效果与可读性。
VitePress 默认主题的 home 布局（即 layout: home）使用 <vphero></vphero> 组件渲染首页英雄区，其标题文本（如 hero.name 和 hero.text）默认采用紧凑的内联样式，缺乏足够的字间距、行高和内边距控制，容易在宽屏或高分辨率设备上显得“ cramped ”（拥挤）。虽然 VitePress 不提供开箱即用的配置项来直接调节这些细节，但可通过轻量级主题定制精准干预。
✅ 推荐方案：启用自定义主题并注入 CSS
首先确保你已启用自定义主题（若尚未启用，请运行 npm run dev 后按提示选择 Custom theme，或手动创建 .vitepress/theme/index.ts）。接着，在 .vitepress/theme/style.css（或 index.ts 中引入的 CSS 文件）中添加以下样式：
/* 优化 Hero 标题区域文字空间 */
.VPHero.VPHomeHero .hero .name,
.VPHero.VPHomeHero .hero .text {
word-spacing: 16px; /* 增加单词间距，改善法语/长词可读性 */
letter-spacing: 0.5px; /* 微调字间距，增强清晰度 */
line-height: 1.4; /* 提升行高，避免文字贴合过紧 */
}
/* 针对响应式：在大屏下进一步扩大视觉呼吸感 */
@media (min-width: 768px) {
.VPHero.VPHomeHero .hero .name {
font-size: 4rem;
}
.VPHero.VPHomeHero .hero .text {
font-size: 1.5rem;
max-width: 90ch; /* 限制行长，防止过长导致阅读疲劳 */
margin: 0.75em auto 1.5em;
}
}? 关键说明：
.VPHero.VPHomeHero是 VitePress 默认主题 Hero 组件的根类名；.hero .name和.hero .text分别对应hero.name和hero.text渲染出的<h1></h1>与<p></p>元素；- 使用
max-width+ch单位比固定像素更语义化，适配字体宽度变化；letter-spacing和word-spacing对法语等空格分隔语言尤为友好（如你原文中的 “Breno Mazzali Medeiros Tomazelli”）；- 所有样式均应置于自定义主题的 CSS 中（而非全局
assets/style.css），以确保作用域可控且不被 HMR 破坏。
⚠️ 注意事项
- ❌ 不要直接修改
node_modules/vitepress/dist/client/theme-default/下的源码——升级时将被覆盖； - ✅ 若使用
style.css，需在.vitepress/theme/index.ts中显式导入：import './style.css' export default Theme
- ? 可通过浏览器开发者工具审查
.VPHero .hero .name元素，确认实际 DOM 结构是否匹配（VitePress v1.3+ 已稳定为该结构）； - ? 移动端建议保留默认
line-height和较小font-size，上述媒体查询已做区分处理。
通过以上方式，你不仅能彻底解决文字“拥挤”问题，还能统一控制字号、间距与响应行为，让首页 Hero 真正成为专业、呼吸感强的技术文档门面。
