Difference in font-Weight Bold/Bolder application

Question

I would like to know the difference in the use of CSS properties font-Weight:Bold and font-Weight:Bolder, because applying these properties I can not see difference between one and the other so as font-Weight normal and Lighter. Would it be something related to cross-browser?

#teste1 {
  font-weight: bold;
}
#teste2 {
  font-weight: bolder;
}
#teste3 {
  font-weight: normal;
}
#teste4 {
  font-weight: lighter;
}

<p id="teste1">Testando!</p>
<p id="teste2">Testando!</p>
<p id="teste3">Testando!</p>
<p id="teste4">Testando!</p>

Answer 1

Bolder, or lighter is actually an inherited attribute. I’ll explain it better. If the father has font normal, and you put bolder in a child the browser understands that this child should have a boldface superior to that of the father. As well as the lighter the browser understand that the child should have the source more "light" than the father’s.

Another point to have and mind is the limitation of one’s own font-family who often doesn’t have a font-wight heavier than the very thing bold, then use bolder would be the same thing as bold, because she doesn’t have a heavier guy to apply, so does the lighter, if the font-family not having a lighter type the lighter will be the normal.

The problem here is that the font itself must have one or more Weights. If it has None you cannot make it Bold at all.

PORTUGUÊS "The problem here is that the font itself must have one or more weights. If you don’t have any, you can’t boldface at all."

View this case study:

For the test case, the font-family Segoe UI for Windows. If the font does not have the weight for all settings, for example if it does not have up to 900 the maximum it will reach is in 700.

OBS: Normal source is considered 400, above that semi-bold, Bold, extra Bold, black and below light, extra light, thin

Source: https://www.quirksmode.org/css/text/fontweight.html

---

Mozilla reference table: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Significado_de_pesos_relativos

Answer 2

If the font type used has available scales, the bolder will take the next upper scale in reference to the parent element scale. The value of bold uses the scale 700, logo if the font type used has scales 800 or 900, the bolder will assume one of these values, which is immediately after the 700.

In this example, using a Google Fonts, scaled 700 and 900, the bolder of the child div assumes the value of 900 for Bold 700 by div pai:

body{
   font-family: 'Noto Serif TC', serif;
}
#pai {
   font-weight: bold;
}
#filho {
   font-weight: bolder;
}

<link href="https://fonts.googleapis.com/css?family=Noto+Serif+TC:400,700,900" rel="stylesheet">

<div id="pai">
   pai - 700 (negrito normal)
   <div id="filho">
      filho - 900 (negrito mais forte)
   </div>
</div>

I believe it is not cross-browser related, but rather the type of font used.