仅使用 CSS 的字体轮廓

Question

我正在使用 CSS 为白色文本添加黑色字体轮廓。目标是下图。到目前为止，我已经能够想出下面的内容。是否还有其他最佳实践可以更接近下图所示的细轮廓？谢谢！

.introText {
font-family: 'Nunito', sans-serif;
-moz-text-fill-color: white;
-webkit-text-fill-color: white;
-moz-text-stroke-color: black;
-webkit-text-stroke-color: black;
-moz-text-stroke-width: 2px;  
-webkit-text-stroke-width: 2px;
font-size: 50px;
margin-top: 20vh;
}
}

<h1 class='introText text-center'>We've got your perfect spot.</h1>

Answer 1

一种方法是使用text-shadow和重叠多个阴影：

.introText {
   text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
}

在这种情况下 4 次。

例子：

.introText {
   text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
}

.introText {
        font-family: "Nunito", sans-serif;
        text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black; 
        color: white;
        font-size: 50px;
        margin-top: 20vh;
      }

它创造了一个非常相似的效果，你可以根据你使用的重复次数来增强或减弱它。