使用 CSS，如何创建*厚* 超过 1px 的文本笔划轮廓？答案

【问题标题】：Using CSS, how do you create a text stroke outline that is *thicker* than 1px?使用 CSS，如何创建*厚* 超过 1px 的文本笔划轮廓？
【发布时间】：2018-12-29 18:37:18
【问题描述】：

下面是我用来做一个 1px 的文本描边轮廓的代码。但是如何让轮廓变粗呢？如果我只是用“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;
}

【问题讨论】：

那是因为文字阴影不是轮廓；他们是影子。您不能简单地替换阴影位置并期望更粗的“轮廓”。
5px --> 你的意思是可能的 0.5px ？
@TemaniAfif 为什么是0.5px？ OP 需要更粗的轮廓，而不是更细的轮廓。
@Xufox 我不知道，但我的脑子读得更细了：p

标签： css stroke outline

【解决方案1】：

您也可以使用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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

有趣的是，这个 css 属性在 webkit 中已经存在了十多年，但它仍然不是官方 css 规范的一部分。
不知道这个属性。这在移动开发中会非常有用。