UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.
The font-stretch property, introduced in CSS3, selects a normal, condensed or expanded face from a font.
In order to use font-stretch and see a result of some kind, the font being used has to have a face that matches the value given. In other words, font-stretch will not work on just any font, but only on fonts that are designed with different faces matching the defined sizes.
p {
font-stretch: ultra-condensed;
}font-stretch accepts one of the following values:
ultra-condensedextra-condensedcondensedsemi-condensednormalsemi-expandedexpandedextra-expandedultra-expanded
If a particular font does not have all the faces represented, any value used will map to the closest equivalent face. Normal or condensed values will map to a narrower font and expanded values will map to a wider face, or else the nearest narrower face.
In supporting browsers, font-stretch can be used as part of the font shorthand property.
Related Properties
Other Resources
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| none | none | 9+ | none | 9+ | none | none |
Hi, I was looking this up in w3 and it says that it isn’t supported in any browsers. I don’t know who’s right, but I didn’t notice the “try me” testing code from w3 working in either firefox or IE..and both are higher than 9
Hi Carine. Read the 2nd paragraph in this article and you’ll see why it wasn’t working. The font face itself has to support it, along with the browser. Just because the browser supports it, doesn’t mean this one will work. It’s kind of a strange thing with fonts and certain properties, but that’s just how it is.
Also, keep in mind that “w3schools” has nothing to do with “w3c” (which is the proper organization). W3schools is okay for learning the basics, but they don’t have any authority as a standards body or anything like that.
Oh ok…Thanks. I had been wondering where the rules were….I know there were resources on w3 schools and Mozilla but never knew the official one. Thanks again.
Use a span tag, write your desired text in span tag and set span properties as follows in style/CSS
span {
transform:scale(3,1);
-webkit-transform:scale(3,1);
display:inline-block;
}
No need for extra fonts or bigger ones – brilliant!
He my life is good for you guys
Browser support now includes
Chrome 48+
Opera 35+
Android 50+
Sadly no iOS and Safari