字体描边
默认的描边效果非常丑，不符合预期。与设计软件中的字体描边效果并不一致，本章节介绍几种实现字体描边的方法
text-stroke 的实现
text-stroke 有一个不错的效果，例如下面这个简单的例子
<div class="demo-1-1">字体 Font</div>
<style scoped>
.demo-1-1 {
-webkit-text-stroke: 2px red;
text-stroke: 2px red;
}
</style>字体 Font
但是在一些特殊字体上还会出现穿模的情况，例如我这里设置了 MonaspaceNeon 字体：
<div class="demo-1-2">字体 Font</div>
<style scoped>
.demo-1-2 {
-webkit-text-stroke: 2px red;
text-stroke: 2px red;
font-family: 'MonaspaceNeon';
}
</style>字体 Font
除此之外，最关键的问题是这个描边的效果是内描边，这意味着如果我们设置了较大的描边值，效果会很奇怪，挤占了文字的空间
<div class="demo-1-3">字体 Font</div>
<style scoped>
.demo-1-3 {
-webkit-text-stroke: 8px red;
text-stroke: 8px red;
}
</style>字体 Font
叠加实现 ✅
最好的方法是：我们可以通过叠加元素的方式实现描边效果，在上面效果的基础上，用伪元素在上面盖一层原有的不描边字体：
<div class="demo-1-4" data-title="字体 Font">字体 Font</div>
<style scoped>
.demo-1-4 {
position: relative;
-webkit-text-stroke: 8px red;
text-stroke: 8px red;
font-size: 50px;
}
.demo-1-4::before {
content: attr(data-title);
position: absolute;
-webkit-text-stroke: 0;
text-stroke: 0;
}
</style>字体 Font
text-shadow 的实现
通过 text-shadow 属性实现的描边效果，虽然不会出现上面阴影交叉的情况，但会出现锯齿效果（越大的描边值越明显），也不美观
<div class="demo-2">字体 Font</div>
<style scoped>
.demo-2 {
color: skyblue;
text-shadow: 0 2px red, 2px 0 red, -2px 0 red, 0 -2px red;
}
</style>字体 Font
仅作为了解，在多数情况下都不推荐使用此方案 ❌
SVG 实现
接下来请出我们神奇的 SVG 选手了，直接可以实现描边效果 ✅
<svg class="demo-3-1">
<text class="text" x="50%" y="50%" fill="skyblue">字体 Font</text>
</svg>
<style scoped>
.demo-3-1 .text {
font-size: 50px;
text-anchor: middle;
dominant-baseline: middle;
stroke-width: 4px;
stroke: red;
paint-order: stroke; /*先描边*/
}
</style>其中 paint-order 属性让默认的内描边变为外描边。text-anchor 和 dominant-baseline 属性让文字居中
通过 stroke-width 属性设置描边宽度，stroke 属性设置描边颜色
但是兼容性相较于之前的方案来说都差一些