Как сделать шрифт толще 900 с помощью css

Question

Я хочу сделать свой шрифт очень толстым из-за цвета фона изображения моих друзей, которое находится в заголовке веб-сайта. Я нашел это в Интернете, но, к сожалению, он не работает. есть ли другой способ сделать это?

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

<h1>MAKE IT BOLD</h1>

Это решение не работает и сохраняет его примерно той же стандартной толщины, что и у меня.

Есть ли способ сделать шрифт толще 900?

_{Свободный перевод вопроса how to make font thicker then 900 using css от участника @Gianluca.}

Answer 1

Используйте 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>

Или много раз 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>

_{Свободный перевод ответа от участника @Temani Afif.}

Answer 2

Обдумайте использование SVG фильтров

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>

Такая же комбинация фильтров, но вместо оператора atop используется оператор xor

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>

_{Свободный перевод ответа от участника @Alexandr_TT.}

Answer 3

А почему бы не использовать drop-shadow filter?

Но забудьте об этом ответе, text-stroke - это лучший способ.

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>

_{Свободный перевод ответа от участника @Creaforge.}

БЛОГ НА HUSL

Как сделать шрифт толще 900 с помощью css

Ответы (3 шт):