html - 使用CSS在文字周围(外部)添加笔触？

我有以下HTML和CSS：

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

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

如下所示：



我想在其周围添加笔触，这意味着这些文本周围有黑色边框。
我用Google搜索并找到-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支持

最佳答案

-webkit-text-stroke不支持将笔划放在文本的外部

正如这个CSS-Tricks atricle解释：


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


SVG呢？

好吧，这似乎也将笔触放在了内部-

FIDDLE

然而，

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

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 CARRER SHOULD YOU HAVE ?</h1>
<h1 class="no-stroke">WHAT CARRER SHOULD YOU HAVE ?</h1>