使用CSS缩放字体

Question

What is the correct way to scale a font using css. And what about compatibility? Maybe it would be better to customize the font file itself?

For example i need to scale Avenir font 116% vertical scale and 105% horizontal scale.

Answer 1

You can use this to

HTML

<p>
 Hello
</p>

CSS

p {
display:inline-block;
transform:scale(1,4); 
-webkit-transform:scale(1,4); 
-moz-transform:scale(1,4); 
-ms-transform:scale(1,4); 
-o-transform:scale(1,4); 
} 

JSFIDDLE

You can change the scale(x,y) value according to your need considering you are changing the height and width differently (ie the ratio of Height:Width is not 1:1)

Answer 2

Two points for you.

Editing the Avenir font itself infringes the font license, you need to get permission from the font foundry for that.

Second never stretch fonts, it looks so bad. When you stretch a font it messes up the stroke widths, horizontal strokes will become thinner than the vertical strokes and when you squish a font up the vertical strokes become thinner than the horizontal ones.

So my answer is there is no correct way to do it.

If you need a condensed font there are plenty available for example:

https://www.google.com/fonts/specimen/Open+Sans+Condensed

Answer 3

I usually use em scaling for font because it automatically adjust to the current font size. Maybe this reference could help you to know about font-size scaling. Hope this helps

Answer 4

we can adjust by increasing the size of font like font-size:40px; and adjust it through line-height