如何在ASP.NET Core项目中调整文本宽度？

首先，font-stretch 样式无效的核心原因是：该属性仅对包含拉伸/压缩变体的字体生效，大部分系统默认字体（比如微软雅黑、Arial、Times New Roman）没有提供这类变体，所以设置后看不到效果。

以下是几种可靠的替代实现方法：

方法1：使用CSS transform: scaleX() #

这是最通用的方案，不管字体有没有变体都能实现文本的拉伸或压缩，缺点是极端缩放可能导致文字轻微模糊，但日常使用足够：

.font-expanded {
  transform: scaleX(1.2); /* 横向拉伸1.2倍 */
  transform-origin: left center; /* 从左侧开始拉伸，避免整体偏移 */
  display: inline-block; /* 确保transform生效，且不影响布局 */
}

.font-condensed {
  transform: scaleX(0.8); /* 横向压缩到0.8倍 */
  transform-origin: left center;
  display: inline-block;
}

对应的HTML保持不变即可：

<p>
      Hello Students
</p>
<p class="font-expanded">
      Hello Students
</p>
<p class="font-condensed">
      Hello Students
</p>

方法2：使用支持拉伸变体的字体 #

如果追求更清晰的文字效果，可以选择本身包含拉伸变体的字体，比如Roboto Condensed、Oswald、Montserrat等。以Roboto为例：

1. 可以下载字体文件到项目中本地引用，或者在布局页的head中引入在线字体：

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&family=Roboto+Condensed:wght@300;400&display=swap" rel="stylesheet">

2. 然后直接使用对应的字体或设置font-stretch：

/* 直接用压缩版字体 */
.font-condensed {
  font-family: 'Roboto Condensed', sans-serif;
}

/* 或者用带拉伸变体的字体设置font-stretch */
.font-expanded {
  font-family: 'Roboto', sans-serif;
  font-stretch: expanded;
}

方法3：调整字符间距（letter-spacing） #

如果不需要整体拉伸字体，只是想微调文本宽度，可以用字符间距属性，这种方式不会改变字体本身的形状：

.font-expanded {
  letter-spacing: 2px; /* 增大字符间距，加宽文本 */
}

.font-condensed {
  letter-spacing: -0.5px; /* 缩小字符间距，收紧文本 */
}

内容的提问来源于stack exchange，提问作者NedaM