CSS奇技淫巧巧妙实现文字二次加粗再加边框

CSS奇技淫巧巧妙实现⽂字⼆次加粗再加边框
本⽂将通过⼀个实际的业务需求，讲解如何实现
极端场景下⽂字加粗加边框效果
⽂字多重边框的效果
需求背景 - ⽂字的⼆次加粗
今天遇到这样⼀个有意思的问题：
在⽂字展⽰的时候，利⽤了 font-weight: bold 给⽂字进⾏加粗，但是觉得还是不够粗，有什么办法能够让⽂字更粗⼀点呢？
emm，不考虑兼容性的话，答案是可以利⽤⽂字的 -webkit-text-stroke 属性，给⽂字⼆次加粗。

： 该属性为⽂本字符添加了⼀个边框（笔锋），指定了边框的宽和颜⾊， 它是 -webkit-text-stroke-width 和 -webkit-text-stroke-color 属性的缩写。

看下⾯的 DEMO，我们可以利⽤ -webkit-text-stroke，给⽂字⼆次加粗：
<p>⽂字加粗CSS</p>
<p>⽂字加粗CSS</p>
<p>⽂字加粗CSS</p>
<p>⽂字加粗CSS</p>
p {
font-size: 48px;
letter-spacing: 6px;
}
p:nth-child(2) {
font-weight: bold;
}
p:nth-child(3) {
-webkit-text-stroke: 3px red;
}
p:nth-child(4) {
-webkit-text-stroke: 3px #000;
}
对⽐⼀下下⾯ 4 种⽂字，最后⼀种利⽤了 font-weight: bold 和 -webkit-text-stroke，让⽂字变得更为粗。

如何给⼆次加粗的⽂字再添加边框？
OK，完成了上述第⼀步，事情还没完，更可怕的问题来了。

现在⽂字要在⼆次加粗的情况下，再添加⼀个不同颜⾊的边框。

我们把原本可能可以给⽂字添加边框的 -webkit-text-stroke 属性⽤掉了，这下事情变得有点棘⼿了。

这个问题也可以转变为，如何给⽂字添加 2 层不同颜⾊的边框？
当然，这也难不倒强⼤的 CSS（SVG），让我们来尝试下。

尝试⽅法⼀：使⽤⽂字的伪元素放⼤⽂字
第⼀种尝试⽅法，有点⿇烦。

我们可以对每⼀个⽂字进⾏精细化处理，利⽤⽂字的伪元素稍微放⼤⼀点⽂字，将原⽂字和访达后的⽂字贴合在⼀起。

将⽂字拆分成⼀个⼀个独⽴元素处理
利⽤伪元素的 attr() 特性，利⽤元素的伪元素实现同样的字
放⼤伪元素的字
叠加在原⽂字之下
上代码：
<ul>
<li data-text="⽂">⽂</li>
<li data-text="字">字</li>
<li data-text="加">加</li>
<li data-text="粗">粗</li>
<li data-text="C">C</li>
<li data-text="S">S</li>
<li data-text="S">S</li>
</ul>
ul {
display: flex;
flex-wrap: nowrap;
}
li {
position: relative;
font-size: 64px;
letter-spacing: 6px;
font-weight: bold;
-webkit-text-stroke: 3px #000;
&::before {
content: attr(data-text);
position: absolute;
drop-shadow(0 0 0.25px blue);
}
效果如下：
然⽽，在不同屏幕下（⾼清屏和普通屏），drop-shadow() 的表现效果差别⾮常之⼤，实则也难堪重⽤。

我们没有办法了吗？不，还有终极杀⼿锏 SVG。

尝试⽅法四：利⽤ S V G feMorph ology 滤镜给⽂字添加边框
其实利⽤ SVG 的 feMorphology 滤镜，可以⾮常完美的实现这个需求。

这个技巧，我在 这篇⽂章中也有提及。

借⽤ feMorphology 的扩张能⼒给不规则图形添加边框。

直接上代码：
<p>⽂字加粗CSS</p>
<svg width="0" height="0">
<filter id="dilate">
<feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="2"></feMorphology>
<feFlood flood-color="red" flood-opacity="1" result="flood"></feFlood>
<feComposite in="flood" in2="DILATED" operator="in" result="OUTLINE"></feComposite>
<feMerge>
<feMergeNode in="OUTLINE" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</svg>
p {
font-size: 64px;
letter-spacing: 6px;
font-weight: bold;
-webkit-text-stroke: 2px #000;
filter: url(#dilate);
}
效果如下:
我们可以通过 SVG feMorphology 滤镜中的 radius 控制边框⼤⼩，feFlood 滤镜中的 flood-color 控制边框颜⾊。

并且，这⾥的 SVG 代码可以任意放置，只需要在 CSS 中利⽤ filter 引⼊即可。

本⽂不对 SVG 滤镜做过多的讲解，对 SVG 滤镜原理感兴趣的，可以翻看我上述提到的⽂章。

⾄此，我们就完美的实现了在已经利⽤ font-weight: bold 和 -webkit-text-stroke 的基础上，再给⽂字添加不⼀样颜⾊的边框的需求。

放⼤了看，这种⽅式⽣成的边框，是真边框，不带任何的模糊：
最后
OK，本⽂到此结束，介绍了⼀些 CSS 中的奇技淫巧去实现⽂字⼆次加粗后加边框的需求，实际需求中，如果不是要求任意字都要有这个效果，其实我更推荐切图⼤法，⾼保真，不丢失细节。

当然，可能还有更便捷更有意思的解法，欢迎在评论区不吝赐教。

希望本⽂对你有所帮助
更多精彩 CSS 技术⽂章汇总在我的 ，持续更新，欢迎点个 star 订阅收藏。

如果还有什么疑问或者建议，可以多多交流，原创⽂章，⽂笔有限，才疏学浅，⽂中若有不正之处，万望告知。