使用CSS，如何创建比1px更粗的文本描边轮廓？

Question

以下是我用来进行1像素文本描边的代码。但如何让描边变得更粗？如果我只是将所有的“1像素”替换为“5像素”，结果看起来很疯狂。

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;
}

- m0a

---

这是因为文本阴影不是轮廓，它们只是阴影。你不能简单地替换阴影位置并期望得到更粗的“轮廓”。 - Sebastian Simon

5px --> 你是不是想说0.5px？ - Temani Afif

@TemaniAfif 为什么是 0.5px？OP 需要的是更粗的轮廓，而不是更细的。 - Sebastian Simon

@Xufox 我不知道，但我的脑海里读起来更加清晰 :p - Temani Afif

Answer 1

你可以考虑使用text-stroke，但需要注意浏览器的支持情况

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

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

- Temani Afif

---

有趣的是，这个 CSS 属性已经在 WebKit 中存在了十多年，但它仍然不是官方 CSS 规范的一部分。 - Håken Lid

不知道这个属性。在移动开发中会非常有用。 - Kosh

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>

- Kosh