Обводка вокруг текста залезает на сам текст

Question

Необходимо сделать прозрачный текст с белой обводкой вокруг. Пример:

Использую CSS-свойство -webkit-text-stroke: -webkit-text-stroke: 1px #fafafa, но в результате следующее:

Как избавиться от этого и какие есть альтернативы? В обоих случаях шрифт Montserrat.

body {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;

  background: black;
  color: white;
}

.hero-description {
  line-height: 1;
}

.hero-title--h1,
.hero-title--h2 {
  overflow: hidden;
}

.hero-description h1,
.hero-description h2 {
  font-size: 4.75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.hero-description h2 {
  -webkit-text-stroke: 1px #fafafa;
  color: transparent;
}

<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

<div class="hero">
  <div class="hero-description">
    <div class="hero-title--h1">
      <h1>HELLO</h1>
    </div>
    <div class="hero-title--h2">
      <h2>ПРИМЕР ТЕКСТА</h2>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Обводка вокруг текста залезает на сам текст

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