Как обвести текст другим цветом?

Question

Подскажите пожалуйста почему текст так странно делает обводку? Из экспериментов понял что это из-за шрифта, но нужен именно этот шрифт https://jsfiddle.net/5gyp2e6w/4/

.background-item-tests-page__name {
    font-weight: 800;
    font-size: 120px;
    color: #3035c4;
    line-height: 130%;
    -webkit-text-stroke: 5px #ffffff;
    background: #161616;
    font-family: "Montserrat", sans-serif;
}

<div class="background-item-tests-page__name">C1</div>

Answer 1

Вы можете использовать text-shadow, это даст вам необходимый результат.

Чтобы упростить написание сложной структуры этого свойства, воспользуйтесь специальным сервисом - Генератор обводки текста

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap");

.background-item-tests-page__name {
  font-weight: 800;
  font-size: 120px;
  color: #3035c4;
  line-height: 130%;
  text-shadow: 
        -0   -1px 0   #FFFFFF,
         0   -1px 0   #FFFFFF,
        -0    1px 0   #FFFFFF,
         0    1px 0   #FFFFFF,
        -1px -0   0   #FFFFFF,
         1px -0   0   #FFFFFF,
        -1px  0   0   #FFFFFF,
         1px  0   0   #FFFFFF,
        -1px -1px 0   #FFFFFF,
         1px -1px 0   #FFFFFF,
        -1px  1px 0   #FFFFFF,
         1px  1px 0   #FFFFFF,
        -1px -1px 0   #FFFFFF,
         1px -1px 0   #FFFFFF,
        -1px  1px 0   #FFFFFF,
         1px  1px 0   #FFFFFF;
  background: #161616;
  font-family:  "Montserrat", sans-serif;
}

<div class="background-item-tests-page__name">A1</div>

БЛОГ НА HUSL

Как обвести текст другим цветом?

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