在文本周围添加描边 \- 在外面 \- 使用 css？

Question

我有以下 HTML 和 CSS：

 body { background-color: gray; }
h1 {
  color: white;
  font-size: 2.5em;
}

 <h1>WHAT CARRER SHOULD YOU HAVE ?</h1>

呈现如下：

我想在它周围添加一个笔划，这意味着这些文本周围有一个黑色边框。

我用谷歌搜索并找到了 -webkit-text-stroke ，并得出：

 body { background-color: gray; }
h1 {
  color: white;
  font-size: 2.5em;
  -webkit-text-stroke: 2px black;
}

 <h1>WHAT CARRER SHOULD YOU HAVE ?</h1>

然而，效果并不是我想要的：

如您所见，笔划似乎添加 在 文本内部，这使文本对我来说看起来太细了。

我怎样才能在文字之外画笔画？

小提琴：http: //jsfiddle.net/jpjbk1z7/

PS：只需要webkit支持

原文由 wong2 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

-webkit-text-stroke 不支持把描边放在文字外面

正如这篇 CSS-Tricks 文章 所解释的那样：

text-stroke 绘制的笔划与文本形状的中心对齐（这是 Adobe Illustrator 中的默认设置），目前没有设置对齐到形状内部或外部的选项。不幸的是，这使得它的可用性大大降低，因为无论现在如何，笔划都会干扰字母的形状，从而破坏了原始字体设计师的意图。一个设置将是理想的，但如果我们必须选择一个，则外部行程会更有用。

SVG 呢？

好吧，它似乎也将中风放在里面 -

小提琴

然而，

您可以通过以下方式 模拟 这种效果（取决于您的需要）：

1. 将字体更改为无衬线字体，如 verdana 和

2. 增加要添加描边的文本的字体大小。

 body {
  background: grey;
  font-family: verdana;
}
.stroke,
.no-stroke {
  color: white;
  font-size: 2.5em;
}
.stroke {
  -webkit-text-stroke: 2px black;
   font-size: 2.7em;
}

 <h1 class="stroke">WHAT CAREER SHOULD YOU HAVE?</h1>
<h1 class="no-stroke">WHAT CAREER SHOULD YOU HAVE?</h1>

原文由 Danield 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于文本阴影模拟的平滑外部笔划，请使用以下 8 轴阴影：

   text-shadow:
    -1px -1px 0 #000,
     0   -1px 0 #000,
     1px -1px 0 #000,
     1px  0   0 #000,
     1px  1px 0 #000,
     0    1px 0 #000,
    -1px  1px 0 #000,
    -1px  0   0 #000;

对于自定义，您可以改用此 SASS mixin（尽管更改大小确实会对渲染产生副作用）：

 @mixin stroke($color: #000, $size: 1px) {
  text-shadow:
    -#{$size} -#{$size} 0 $color,
     0        -#{$size} 0 $color,
     #{$size} -#{$size} 0 $color,
     #{$size}  0        0 $color,
     #{$size}  #{$size} 0 $color,
     0         #{$size} 0 $color,
    -#{$size}  #{$size} 0 $color,
    -#{$size}  0        0 $color;
}

这提供了非常平滑的行程，没有遗漏零件，就像 4 轴解决方案一样。

原文由 Ryall 发布，翻译遵循 CC BY-SA 4.0 许可协议