make text double bold - scaled sheets

Question

Is there any way to increase the intensity of the bold-ness of apply it twice?

I am using this styling on my text:

  numbers: {
    fontSize: 30,
    color: '#31C283',
    fontWeight: 'bold',
  },

Is it possible to make it double/more bold without increasing the font size?

Answer 1

You can slightly adjust the thickness by setting numerical values at the property fontWeight .

Besides bold the property fontWeight can also handle numerical values, such as 100 for very thin and 900 for very thick.

As far as I know, fontWeight: 'bold' has the numerical value fontWeight: '700' .

So:

fontWeight: '900' should be slightly thicker than fontWeight: 'bold'

Well, it's not the "double" what you actually ask for, but maybe this helps you a bit.

Source: https://www.w3schools.com/cssref/pr_font_weight.asp

---

If you want to have a text "bolder" than fontWeight: '900' you will have to use "visual cheats", eg another font-family or text-shadow.

Here is some sample:

 <div style="font-weight:900;">I am the highest font-weight value 900</div> <div class="doublethick">But I am even thicker:)</div> <style>.doublethick { color:#000000; text-shadow: 0.5px 0 #000000; letter-spacing:1px; font-weight:bold; } </style>

Answer 2

you can use text shadow property like this

 <h1 style="text-shadow: 2px 0px 1px #000;">This is h1 tag</h1>

Answer 3

For making a number double bold you can use this code

numbers: {
   font-size: 30;
   color: hex;
   font-weight: 800;
}

I think it will work.