CSS中可通过两种主要方式使文字变扁：一是使用font-stretch属性，设置值为expanded（或具体百分比如150%），但需字体本身支持拉伸变体；二是通过transform: scaleX()水平缩放文字，如transform: scaleX(1.5)可让文字横向拉伸50%，视觉上变扁，建议配合transform-origin: left调整基准点，避免布局偏移，前者更符合字体规范，后者适用性更广但需注意元素溢出问题。
CSS实现文字变扁的实用方法
在网页设计中,文字的排版风格直接影响整体的视觉效果，有时为了追求特定的设计风格（如复古海报、科技感UI或紧凑的版式），我们需要让文字"变扁"——即在不改变字体大小的情况下，水平拉伸文字，使其宽高比增大，看起来更扁平，本文将详细介绍两种主流的CSS实现方法，并分析它们的适用场景与注意事项。
什么是文字变扁？
文字变扁本质是调整文字的宽高比（宽度与高度的比值），正常情况下，文字的宽高比由字体本身决定（如"方正黑体"的宽高比约为1:1），而"变扁"则是通过CSS属性将文字在水平方向拉伸、垂直方向压缩，使宽高比大于1，达到"扁"的视觉效果。
这种技术常见于多种设计场景：
- 复古海报设计,营造20世纪早期的印刷风格
- 科技感UI界面,增强未来感和科技感
- 紧凑版式布局,在有限空间内展示更多内容
- 品牌标识设计,创造独特的视觉识别
使用 transform: scaleX() 水平缩放
transform: scaleX() 是CSS3中的变换属性，可以对元素进行水平方向的缩放，当 scaleX 的值大于1时，元素会水平拉伸，从而让文字变扁。
原理与代码示例
scaleX() 的语法为 transform: scaleX(缩放因子)。"缩放因子"为正数，大于1时拉伸，小于1时压缩，将文字水平拉伸至1.5倍：
.text-flat {
display: inline-block; /* 避免transform影响行内元素布局 */
transform: scaleX(1.5); /* 水平拉伸1.5倍 */
}
效果：原本宽高比为1的文字，经过 `scaleX(1.
