Font-weight not working properly?

http://www.i3physics.com/blog/2010/07/dsfsdf/

Here is an example.

The part where she said β€œPHP” (upper right corner) remained as thin as she was. here is a piece of css code

.wp_syntax_lang { background-color:#3c3c3c; position:absolute; right:0; padding:1px 10px 3px; color:#ddd; font-size:9px; font-weight:800; text-transform:uppercase; -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; border-radius-bottomleft:5px; } 

I tried boldly, boldly, 700, 800, 900 and did not work under FF.

+11
css fonts
source share
6 answers

Because the font size (9px) is too small to display bold. Try 11px or more and it works great.

+19
source share

Most browsers do not fully support numeric values ​​for font-weight . Here is a good article about the problem , and even tough it is a little old, it seems correct.

If you need something bolder, you can try using a different font, bolder than your existing one. Naturally, you could adjust the font size for a similar effect.

+16
source share

font-weight may also not work if the font you use does not have these weights, you often encounter this when embedding custom fonts. In these cases, the browser is likely to round the number to the nearest weight available to it.

For example, if I insert the following font ...

 @font-face { font-family: 'Nexa'; src: url(...); font-weight: 300; font-style: normal; } 

Then I will not be able to use anything other than a weight of 300. All other weights will return to 300 unless I specify additional @font-face declarations with these additional weights.

+10
source share

I removed text-transform: uppercase; and then set it to bold / bolder , and it seemed to work.

+1
source share

For me, bold work when I change the font style with font-family: 'Open Sans', sans-serif; on Arial

0
source share

In my case, I used the Google Roboto font. So I had to import it at the top of my page with the correct weight.

 <link href = "https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto+Slab|Roboto:300,400,500,700" rel = "stylesheet" /> 
0
source share

All Articles