使用外部发光创建内部文本边框效果

Question

如何重新创建以下文字设计？字体是Gill Sans MT，文字颜色是紫色（尽管很难说）

我目前的尝试似乎无法获得充满活力的厚边框和薄内在效果：

＆＃13;

＆＃13;

p {
  color: purple;
  text-align: center;
  font-weight: 100;
  text-shadow:
    white 0px 0px 50px,
    white 1px 0px 1px,
    white 0px -1px 1px,
    white 0px 1px 1px,
    white -1px 0px 1px;
}

＆＃13;

<p>
  Community
</p>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用text-stroke获得更清晰的结果。 Browser support is pretty good

使用bold或heavy字体粗细来获得最佳效果。

body{ background: #000; }

p {
  text-transform: uppercase;
  font-family: arial;
  font-weight: 800;
  font-size: 46px;
  color: purple;
  text-align: center;
  font-weight: 100;
  -webkit-text-stroke: 2px white;
  text-shadow: 0 0 80px red, 0 0 50px red;
}

<p>
  Community.
</p>

Answer 2

对于一个充满活力的厚边框，你可以尝试以下不必要的长text-shadow：

p {
  /* Purely for display in the Stack Snippet */
  background: black;
  font-size: 50px;
  padding: 20px;

  color: purple;
  text-align: center;
  font-weight: 100;
  text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff, 0px 1px 0 #fff, 0px -1px 0 #fff, -1px 0px 0 #fff, 1px 0px 0 #fff, 2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff, 0px 2px 0 #fff, 0px -2px 0 #fff, -2px 0px 0 #fff, 2px 0px 0 #fff, 1px 2px 0 #fff, -1px 2px 0 #fff, 1px -2px 0 #fff, -1px -2px 0 #fff, 2px 1px 0 #fff, -2px 1px 0 #fff, 2px -1px 0 #fff, -2px -1px 0 #fff;
}

<p>Community</p>

希望这有帮助！ ：）