仅使用 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 {
        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;
      }

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

它产生的效果非常相似，您可以根据使用的重复次数使它更强或更弱。

Answer 2

也许这就是你的要求

.introText {
  font-family: 'Nunito', sans-serif;
  background: gray;
  color: white;
  font-size: 50px;
  font-weight: 400;
  border: 100px white solid;
  margin-top: 20vh;
}

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

仅使用 CSS 的字体轮廓

Font outline using only CSS

html

css

text

outline