Property font-stretch

Navigation
4

Today I came across a very intriguing CSS property that is font-stretch .

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

In this case when I clicked on the arrow to extend the font:► 16px sans-serif; , I found the property font-stretch , which I did not know: 

.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 as I suspected and as the name implies, this property serves to stretch and shrink text. But now here is the scene ... None (or almost any) browser supports this property, according to: w3schools - font-stretch Property

So what is the font-stretch property for? What is your purpose?
Has it been a property already implemented in the future and so it is still not working?

    
asked by anonymous 11.10.2015 / 17:05

1 answer

3

Do what you really understood. And it's implemented in some browsers. Do not trust W3Schools. A more reliable place to find out this is caniuse.com . It is not 100% reliable, but it is almost. It shows already exist in IE, Edge and FireFox. I think you'll soon have it in others as it's part of the CSS 3 specification as < in> 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 */
}

Font .

Documentation .

    
11.10.2015 / 17:15
Java Fork / Join Does it work just like the C fork? Route configuration in NodeJS using Express 4.8