Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Browser support for numeric font-weight

When was full support for numeric font-weight added to each browser? Specifically: IE, FireFox, Chrome, Safari, iOS Safari, Android Browser.

I know all browsers support bold and normal, but I've been unable to find a up-to-date list of browsers that fully support numeric values for the CSS font-weight property. The only info I found was Font-weight is still broken. It shows most browsers at the time failing to render numeric weights correctly but it's from 2009 before IE8 was even released.

Example:

<link href='http://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<style>
body { font-family: 'Roboto', sans-serif; }
.light { font-weight:300 }
.normal { font-weight:400 }
.bold { font-weight:700 }
</style>
like image 229
Justin Avatar asked Oct 31 '22 09:10

Justin


1 Answers

AFAIK, the numeric values for font-weight are there since font-weight was supported on each browser... the thing is that all nuances of the weight (all that numeric-scale spectre), depends on the font itself (from the user's machine, or if you've added via @font-face), if the font doesn't have a "semibold", 500 won't do anything.

You can take a look to the specification, there's an explanation of how browsers behave when the weight is not present at the font: http://www.w3.org/TR/CSS21/fonts.html#font-boldness

Hope this can help

like image 55
Jesus Lugo Avatar answered Nov 08 '22 05:11

Jesus Lugo