本文详解如何通过 CSS 的 letter-spacing 属性替代失效的 font-stretch，实现对 HTML 文本（如 标签内句子）水平方向上的“变宽”或“收窄”效果，并说明其原理、用法及兼容性注意事项。
本文详解如何通过 css 的 `letter-spacing` 属性替代失效的 `font-stretch`，实现对 html 文本（如 `
` 标签内句子）水平方向上的“变宽”或“收窄”效果，并说明其原理、用法及兼容性注意事项。
在 ASP.NET Core 项目中，开发者常希望通过 CSS 快速调整一段文字（例如
Hello Students
）的整体视觉宽度。此时容易误用 font-stretch 属性——它并非用于“拉伸/压缩”当前字体的字形，而是从同一字体族（font family）中选择预定义的宽度变体（如 ultra-expanded、semi-condensed 等）。若所用字体（如系统默认的 Segoe UI、Helvetica 或 Web 字体）未提供这些变体，font-stretch 将完全无效，所有段落渲染宽度一致。真正可控、通用且即刻生效的方案是使用 letter-spacing：
/* 在 wwwroot/css/site.css 或组件样式文件中定义 */
.font-expanded {
letter-spacing: 4px; /* 字符间增加间距，视觉上“变宽” */
}
.font-condensed {
letter-spacing: -0.8px; /* 字符间收紧，视觉上“收窄”，注意避免过度重叠 */
}
对应 HTML（可直接写在 Razor 页面 .cshtml 中）：
<p>Hello Students</p> <p class="font-expanded">Hello Students</p> <p class="font-condensed">Hello Students</p>
✅ 优势说明：
- letter-spacing 是广泛支持的 CSS2.1 属性，兼容所有现代浏览器及 IE9+；
- 无需依赖特定字体文件，对任何字体（包括系统字体、Google Fonts、自托管 Web Font）均有效；
- 值支持 px、em、rem、normal 等单位，便于响应式设计（例如 letter-spacing: 0.05em 可随字号自适应缩放）。
⚠️ 重要注意事项：
- 避免对中文、日文等 CJK 文本设置过大负值（如 -3px），易导致字符粘连、影响可读性；
- letter-spacing 会影响整个元素内所有字符（含空格与标点），如需精细控制单个词，建议包裹 并单独设置；
- 若需真正意义上的字形几何拉伸（如 SVG 文字变形），应改用 transform: scaleX()，但该方式会扭曲字体抗锯齿并影响语义结构，不推荐作为文本宽度调控首选。
总结：在 ASP.NET Core 的前端呈现中，当目标是直观地“加宽”或“压窄”一句话的显示宽度时，请果断放弃 font-stretch，转而采用稳定、灵活、语义清晰的 letter-spacing —— 它是解决此类需求最直接、最可靠的标准 CSS 方案。
