работа в html и css

Рейтинг: 0Ответов: 2Опубликовано: 23.02.2023

Подскажите, пожалуйста, как в слове WHITE в каждой букве установить разную жирность.

Рисунок ниже:

введите сюда описание изображения

css html
Источник: Stack Overflow на русском

Ответы

▲ 5

Можно сделать так:

<p>
  <span style='font-weight: 900; color: rgb(0, 0, 0);'>W</span>
  <span style='font-weight: 700; color: rgb(43, 43, 43);'>H</span>
  <span style='font-weight: 500; color: rgb(104, 104, 104);'>I</span>
  <span style='font-weight: 400; color: rgb(165, 165, 165);'>T</span>
  <span style='font-weight: 100; color: rgb(201, 201, 201);'>E</span>
</p>

там все же больше идет эффект из за разницы цвета у букв, а не из за жирности шрифта

▲ 4

p {
    background: linear-gradient(90deg, #000 0, #cecece 80%, #fff 100%);
    -moz-background-clip: text;
    -webkit-background-clip: text;
    -moz-text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    font-size: 50px;
    display: inline-block;
}
<p>IMAGE</p>