Quite often there are only a few weights available for a font family. When a weight is specified in CSS for which no face exists, a face with a nearby weight is used based on the following rules (as per the W3 spec):
| Font Weight | Substitute Selection Algorithm |
|---|---|
100 - 300 |
Weights below the specified weight are checked in descending order followed by weights above the specified weight in ascending order until a match is found. |
400 |
500 is checked first; if not found then weights below 400 are checked in descending order (i.e. 300 - 100) followed by weights above 500 in ascending order (i.e. 600 - 900) until a match is found. |
500 |
400 is checked first; if not found then weights below 400 are checked in descending order (i.e. 300 - 100) followed by weights above 500 in ascending order (i.e. 600 - 900) until a match is found. |
600 - 900 |
Weights above the specified weight are checked in ascending order followed by weights below the specified weight in descending order until a match is found. |
Please note that if a font family does not contain a specified font weight, some CSS3-compatible browsers may synthesize the appearance of text for the purpose of style matching (i.e. they will try to create the weight themselves).
Hope you found this post useful. It was published . Please show your love and support by sharing this post.