文本的真实轮廓答案

【问题标题】：Real outline for text文本的真实轮廓
【发布时间】：2021-01-09 21:55:33
【问题描述】：

有没有办法在我的网站上勾勒出文字？我正在做一个项目，我想勾勒出文本，但我找不到真正的解决方案，很多人说我应该使用 text-shadow，而其他一些人则说“SVG”更好。

有真正的解决方案吗？

【问题讨论】：

检查这将有助于stackoverflow.com/questions/64508701/…
似乎很多人都尝试过为文本添加大纲，这个question 有很多不同的方法。对于它的价值，现代浏览器很好地支持纯 css 轮廓，如果您不需要 SVG，我会坚持使用 css 解决方案。
@Lars 啊，我用这个话题作为灵感，因为没有真正令人满意的信息，但我想 Ï 将与文本阴影一起去......

【解决方案1】：

.stroke {
  -webkit-text-stroke: 2px limegreen;
  color: transparent;
}

.stroke-explicit {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: red;
  color: transparent;
}

h1 {
  font-size: 60px;
}

<h1 class="stroke">Shorthand</h1>
<h1 class="stroke-explicit">Both properties</h1>

【讨论】：