如何通过CSS实现字体的纵向拉伸？

Hey there! I totally get why using transform: scale() might not feel like the perfect solution—it’s great for quick visual scaling, but it doesn’t adjust the element’s actual layout box, which can lead to overlaps or weird spacing issues. Let’s go through better approaches to vertically stretch text on your webpage:

1. Fix the scaleY() Layout Issue #

If you want to stick with CSS transforms, you can tweak the element’s dimensions to match the stretched appearance so it doesn’t break your layout:

.vertical-stretch {
  /* Stretch text vertically by 1.5x */
  transform: scaleY(1.5);
  /* Anchor the stretch to the top to avoid shifting */
  transform-origin: top left;
  /* Adjust height to match the scaled size */
  height: calc(100% * 1.5);
  /* Optional: Tweak line-height to improve spacing */
  line-height: 1.6;
}

This fixes the layout problem by making the element’s box match the stretched visual size. The downside is you’ll need to adjust the height and line-height values manually based on your stretch ratio.

2. Use SVG for Crisp, Layout-Friendly Stretching #

SVG is a fantastic option for precise vertical text stretching because it scales vectors cleanly and adjusts the element’s natural size to match the stretched text. Here’s how to embed it in your HTML:

<!-- Adjust width/height based on your text size -->
<svg width="250" height="50">
  <text 
    x="0" 
    y="35" 
    transform="scale(1, 1.5)" 
    font-family="YourFont, sans-serif" 
    font-size="24"
    fill="#000"
  >
    Vertically Stretched Text
  </text>
</svg>

• The transform="scale(1, 1.5)" parameter sets horizontal scale to 1 (no change) and vertical scale to 1.5 (50% stretch).
• You can adjust font-size, x/y positions, and the scale values to get exactly what you want.
• SVG text stays sharp at any scale, which is a big win over pixel-based CSS scaling.

3. Note: font-stretch Isn’t for Vertical Scaling #

Quick heads-up—you might have seen font-stretch mentioned, but that property only adjusts the horizontal width of text (condensing or expanding it side-to-side), not the vertical height. It won’t help with your vertical stretching goal.

Which Method Should You Choose? #

• Use scaleY() with adjusted dimensions if you want a pure CSS solution and don’t mind manual layout tweaks.
• Use SVG if you need crisp, layout-safe stretching that works across all modern browsers without weird spacing issues.

Yes, absolutely you can vertically enlarge text on a webpage—these methods give you control over the stretch ratio without the downsides of basic scale usage.

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