如何使用 css 使字体厚于 900

Question

I want to make my font super thick due to the background colour of my friends image that is in the header of the website. I found this online, but it is not working unfortunately. is there any other way to do this?

 h1{ text-shadow: 1px 0 #888888; letter-spacing:1px; font-weight:bold; }

 <h1>MAKE IT BOLD</h1>

this above is not working and keeps it around the same standard thickness I have already.

please let me know another solutions.

Answer 1

use text-stroke

 .box { letter-spacing: 5px; font-size: 30px; font-weight: 900; font-family:sans-serif; }.th { -webkit-text-stroke: 3px; text-stroke: 3px; }

 <div class="box">HELLO WORLD</div> <div class="box th">HELLO WORLD</div>

Or a lot of text-shadow:

 .box { letter-spacing: 5px; font-size: 30px; font-weight: 900; font-family:sans-serif; }.th { text-shadow:0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px,0 0 2px; }

 <div class="box">HELLO WORLD</div> <div class="box th">HELLO WORLD</div>

Answer 2

Just because why not drop-shadow filter?

But forget this answer, text-stroke is the way to go.

 h1{ letter-spacing:1px; font-family: "Comic Sans MS", "Comic Sans", cursive; font-weight:bold; filter: drop-shadow(1px 1px 0 #000) drop-shadow(-1px -1px 0 #000) drop-shadow(1px -1px 0 #000) drop-shadow(-1px 1px 0 #000) }

 <h1>NOW THAT'S BOLD</h1>

Answer 3

Another way is by using text-shadow to add on the text

 .bold { letter-spacing: 1px; font-size: 1em; font-weight: 900; }.extra-bold { text-shadow: 0px 1px, 1px 0px, 1px 1px; }

 <div class="bold">Make it bold</div> <div class="bold extra-bold ">Make it bold</div>

Answer 4

Consider using SVG filters

 h1{ text-shadow: 1px 0 #888888; letter-spacing:1px; font-weight:bold; filter:url(#f1) }

 <h1>MAKE IT BOLD</h1> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" > <defs> <filter id="f1"> <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" > </feGaussianBlur> <feColorMatrix in="blur" type="matrix" values=" 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 29 -1" result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="atop"/> </filter> </defs> </svg>

The same combination of filters but instead atop operator is used xor operator

 h1{ text-shadow: 1px 0 #888888; letter-spacing:1px; font-weight:bold; filter:url(#f1) }

 <h1>MAKE IT BOLD</h1> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" > <defs> <filter id="f1"> <feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" > </feGaussianBlur> <feColorMatrix in="blur" type="matrix" values=" 1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 24 1" result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="xor"/> </filter> </defs> </svg>