font-stretch property

Question

Today I came across a rather intriguing CSS property which is the font-stretch.

In Google Chrome usually when we inspect an element that has multiple properties attached to a single property (for example: margin:► 0; font:► 14px sans-serif; border:► 1px solid #000;), they appear with a arrow as I added in these examples above, where we can click on it to extend the content and see what are the properties that are being applied adding the code in this way.

In this case when I clicked on the arrow to extend the font:► 16px sans-serif;, I found the property font-stretch, that I didn’t know about:

.sidebar h2, .widget h2.title {
    color: #333;
    font:▼ 16px sans-serif;
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      font-stretch: normal;
      font-size: 16px;
      line-height: normal;
      font-family: Oswald;
    padding:► 5px 0;
    text-transform: uppercase;
}

So I did a Google search, and just like I suspected and as the name implies, this property serves to stretch and shrink text. But now here is where the scene is... No (or almost no) browser supports this property, according to the: w3schools - font-stretch Property

So what’s the property for font-stretch? What is its purpose?
Has it been a property implemented already thinking ahead and so it is not yet in operation?

Answer 1

Do what you really mean. And it’s implemented in some browsers. Don’t trust W3schools. A more reliable place to find out is caniuse.com. It is not 100% reliable, but it is almost. It shows already exist in IE, Edge and Firefox. I think soon will in others since it is part of the specification of CSS 3 as Candidate Recommendation.

To reproduce the effect you can do this:

span.stretch {
    display:inline-block;
    transform:scale(2,1); /* W3C */
    -webkit-transform:scale(2,1); /* Safari and Chrome */
    -moz-transform:scale(2,1); /* Firefox */
    -ms-transform:scale(2,1); /* IE 9 */
    -o-transform:scale(2,1); /* Opera */
}

I put in the Github for future reference.

Source.

Documentation.