Font-stretch property not working on IE11

.bord {
  border: 1px solid black;
  font-stretch: extra-condensed;
}

<div class="bord">
  Hello, there is an error in your code. Also the content does not condense as desired
</div>

The class bord contains font-stretch css property but doesn't seem to work on IE11

Solution 1:

According to this, here is why :

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.

so this is not an IE11 issue.

here is a snippet with your code (no font set):

.bord {
  border: 1px solid black;
  font-stretch: extra-condensed;
}

<div class="bord">
  Hello, there is an error in your code. Also the content does not condense as desired
</div>

here is a snippet with font set (that can be stretched/condensed):

div {
  border: 1px solid black;
  font-family: arial;
}
.bord {
  font-stretch: extra-condensed;
}

<div class="bord">
  Hello, there is an error in your code. Also the content does not condense as desired
</div>
<hr />
<div>
  Hello, there is an error in your code. Also the content does not condense as desired
</div>

Note:

Remember this is CSS3 property, and still not widely used in browsers, only IE9+ and Firefox 9+.

Font-stretch property not working on IE11

Solution 1:

here is a snippet with your code (no font set):

here is a snippet with font set (that can be stretched/condensed):

Note:

Related

Recent Posts