仅使用 CSS 的字体轮廓答案

【问题标题】：Font outline using only CSS仅使用 CSS 的字体轮廓
【发布时间】：2019-08-12 16:29:46
【问题描述】：

我正在使用 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;
}
}

&lt;h1 class='introText text-center'&gt;We've got your perfect spot.&lt;/h1&gt;

【问题讨论】：

标签： html css text outline

【解决方案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;
      }

    &lt;h1 class="introText text-center"&gt;We've got your perfect spot.&lt;/h1&gt;

它会产生非常相似的效果，你可以根据你使用的重复次数来增强或减弱它。

【讨论】：

【解决方案2】：

也许这就是你的要求

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

&lt;h1 class='introText text-center'&gt;We've got your perfect spot.&lt;/h1&gt;

【讨论】：