使用CSS拉伸字体的最实用方法

Question

I want to stretch the Helvetica font making the text 20% taller, I've looked around and can see theres nothing that has all browser support without using some kind of JS or hacks.

What would be the most practical way to do this using (preferably) just CSS? My initial thought would be to find a similar taller font and use that instead.

Answer 1

Kind of a hack, not very cross-browser, and may not work for your situation, but despite that you could use transform: scale(1,1.5); .

.tallhelvetica{
    font:20px Helvetica;
    transform: scale(1,1.5);
}

Other than that, you would need to find or create another font.

See this demo: JSFiddle .

Answer 2

There is no way to strech a font vertically in CSS. What @SuperScript's answer demonstrates means stretching any content vertically in an algorithmic way. It means that horizontal strokes are thickened, among other things, and the result is typographically inferior.

The font-stretch property carries a misleading name: it is meant to select a typeface (specific font in a font family) based on its design in the horizontal direction – it does not stretch a font but selects a “stretched” or “condensed” typeface. Most fonts commonly used on web pages do not have such typefaces. And in any case that would not have anything to do with vertical stretching in any sense.

The conclusion is indeed that you should find a different font – or reconsider the decision that made you think you need a taller font.