如何解决font-stretch属性无法生效的问题

font-stretch 不是用来直接拉伸或压缩字体的工具——它的作用是调用字体本身预先设计好的窄体/宽体变体。如果你的字体没有对应变体，浏览器只会显示默认字体样式，不会做任何变形。

核心解决步骤： #

1. 确认字体是否包含对应变体
   很多字体的窄体、宽体是独立的字体文件，比如你用的Myriad Pro，它的Condensed、Ultra Condensed是单独的字体名称，并非通过font-stretch触发。你需要检查系统是否安装了完整的字体包，而不只是常规体。

2. 直接指定变体字体名（针对非可变字体）
   如果字体变体是独立文件，直接在font-family里指定对应名称，而不是依赖font-stretch：

   p {
     font-size: 5em;
     font-family: 'Myriad Pro';
   }
   .ultra-condensed { font-family: 'Myriad Pro Ultra Condensed'; }
   .extra-condensed { font-family: 'Myriad Pro Extra Condensed'; }
   .condensed { font-family: 'Myriad Pro Condensed'; }
   

   对应的HTML修改为：

   <p>
     <span class="ultra-condensed">P</span>
     <span class="extra-condensed">P</span>
     <span class="condensed">P</span>
     <span>P</span> <!-- 常规体 -->
   </p>
   

3. 使用可变字体（推荐方案）
   现代可变字体（Variable Fonts）支持通过font-stretch直接调整字宽，不需要单独的变体文件。比如Roboto Flex、Inter Variable这类字体，只需确保字体支持该特性：

   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="utf-8">
     <title>font-stretch 生效示例</title>
     <style>
       @font-face {
         font-family: 'Roboto Flex';
         src: local('Roboto Flex'); /* 确保系统已安装，或引入在线字体资源 */
       }
       p {
         font-size: 5em;
         font-family: 'Roboto Flex';
       }
     </style>
   </head>
   <body>
     <p>
       <span style="font-stretch: 50%">P</span>
       <span style="font-stretch: 75%">P</span>
       <span style="font-stretch: 100%">P</span>
       <span style="font-stretch: 125%">P</span>
       <span style="font-stretch: 150%">P</span>
     </p>
   </body>
   </html>
   

4. 临时 fallback：用transform模拟（不推荐）
   如果没有合适的字体变体，只能用transform: scaleX()模拟字宽变化，但这会导致文字边缘模糊，仅适合临时场景：

   .semi-condensed {
     transform: scaleX(0.8);
     display: inline-block; /* 确保缩放不影响布局 */
     transform-origin: left center;
   }
   

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