使用CSS，如何创建“厚于” 1px的文本笔划轮廓？

Question

下面是我用来做1px的Text Stroke轮廓的代码。但是，如何使轮廓变粗呢？如果我只用“ 5px”替换所有“ 1px”，结果看起来很疯狂。

HTML

<div class="element">
Hello!
</div>

CSS

.element {
color:white;

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

Answer 1

您可以考虑text-stroke，但需要注意to browser support

.element {
  color: white;
  font-size:50px;
  -webkit-text-stroke: 5px #000;
}

<div class="element">
  Hello!
</div>

Answer 2

您也可以使用SVG，尽管它需要更多代码：

.element {
  font-size: 50px;
}

svg {
  width: 100%;
  height: 1.3em;
}

svg text {
  fill: pink;
  stroke-width: 8px;
  paint-order: stroke;
  stroke: violet;
}

<div class="element">
  <svg><text x="8px" y="75%">Hello kitty!</text></svg>
</div>