如何在 CSS 中应用仅出现在各个字母外部的文本描边？

Question

我正在尝试对我正在构建的网页的某些标题应用文本描边，但无论我是使用 -webkit-text-lines 还是将标题导出为 SVG，文本描边总是应用不正确。

我尝试过使用 -webkit-text-lines，但它没有达到我想要的外观。我最初在 Figma 中设计了网页，并尝试将标题导出为 SVG，但是当我尝试此操作时，文本笔画被应用到字母内部（参见下面的第一张图片），尽管在 Figma 中指定它应该只应用在外面。我在这里错过了什么吗？

这些是我尝试应用 -webkit-text-lines 的不同方法：

示例1 -webkit-文本-描边：1px#000000； -webkit-文本填充颜色：#F45800；

示例2 -webkit-文本-笔划-颜色：#000000； -webkit-文本笔触宽度：1px；

有没有办法将 genuine 文本笔画仅应用于字母的外部？我看到其他人建议使用文本阴影，但老实说它并没有达到完全相同的外观。

我在下面列出了我正在努力实现的目标与我当前正在处理的目标的示例。

这就是我想在 CSS 中实现的目标

这是我从 Figma 导出为 SVG 并在 CSS 中使用 -webkit-text-lines 时得到的结果

提前致谢！

Answer 1

我找到的最佳解决方案如下，但它仍然与我猜测的所需设计不完全匹配。在figma上，边缘更圆润

 * {
 background-color : rebeccapurple
 }

.stroke-text {
    position: relative;

    font-size: 36px;
    color: rebeccapurple;
    text-shadow:
      0 0 6px rgba(0, 0, 0, 0.3),
      0 0 20px rgba(0, 0, 0, 0.2);

    z-index: 2;
  }

  .stroke-text::before {
    position: absolute;

    content: attr(data-text);

    top: 0;
    left: 0;
    z-index: -1;
    -webkit-text-stroke-width: 6px;
    -webkit-text-stroke-color: #FFF;
  }

<p class="stroke-text" data-text="
I feel like this is the best solution.">
I feel like this is the best solution.</p>

Answer 2

我看不出这有什么问题：

h1 {
  font-family: sans-serif;
  font-size: 3em;
  font-style: italic;
  text-transform: uppercase;
  color: tomato;
  -webkit-text-stroke: 2px black;
  margin: 0;
}

<h1>Hello</h1>