离谱的需求：实现文字双重加粗加边框

本文将通过一个实际的业务需求，来讲解极端场景下如何实现文字加粗加边框的效果，以及文字多重边框的效果。今天遇到这样一个有趣的问题：1.在显示文字的时候，我用font-weight:bold把文字加粗了，但是还是觉得不够粗。有没有办法让文字变粗？emm，如果不考虑兼容性的话，答案是可以利用文字的-webkit-text-stroke属性，让文字再次变成粗体。[MDN-webkit-text-stroke]("MDN-webkit-text-stroke")：该属性为文本字符添加边框（描边），指定边框的宽度和颜色，它是-webkit-text-stroke是-width和-webkit-text-stroke-color属性的缩写。看下面的DEMO，我们可以使用-webkit-text-stroke将文字加粗两次：

BoldtextCSS

BoldtextCSS

BoldtextCSS

CSS

p{??font-size:48px;letter-spacing:6px;}p:nth-child(2){font-weight:bold;}p:nth-child(3){-webkit-text-stroke:3pxred;}p:nth-child(4){-webkit-text-stroke:3px#000;}比较下面4种文字，最后一种使用font-weight:bold和-webkit-text-stroke，使文字变粗。CodePenDemo--font-weight:boldand-webkit-text-stroke双粗体文本[1]如何给双粗体文本添加边框？OK，上面的第一步就完成了，事情还没有结束，更可怕的问题来了。现在文本需要加粗两次，并添加不同颜色的边框。我们使用了-webkit-text-stroke属性，它可以为文本添加边框，所以事情变得有点棘手。这个问题也可以转化为，如何给文字添加2层不同颜色的边框？这并不容易，设计师们，请上图。当然，这不是强大CSS（SVG）的问题，我们来试试吧。尝试方法一：使用文本伪元素放大文字第一种尝试方法有点繁琐。我们可以对每段文字进行微调，利用文字的伪元素将文字稍微放大，将原文和Finder之后的文字粘贴在一起。将文本拆分为单独的元素。利用伪元素的attr()特性，可以实现使用伪元素同样的词放大。伪元素的词叠加在原文的下面。代码：

textwordadd粗体CSS

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;top:0;left:0;bottom:0;right:0;color:red;-webkit-text-stroke:3px#f00;z-index:-1;transform:scale(1.15);}}上面的效果可以简单加个动画，一看就懂：CodePenDemo--使用伪元素给粗体文字加边框[2]看起来不错，但其实仔细看，border效果很粗糙，文字的每一部分都没有规律的遮住，效果不行：试试方法二：使用text-shadow模拟border第一种方法失败，我们继续尝试第二种方法，使用text-shadow来模拟frame。我们可以为两倍粗体文本添加文本阴影：

TextBoldCSS

p{??font-size:48px;letter-spacing:6px;font-weight:bold;-webkit-text-stroke:1px#000;text-shadow:002pxred;}看效果：嗯，这个离边框太远了，是阴影。不过不用担心，text-shadow支持多重阴影。让我们多次叠加上面的文字阴影：p{font-size:48px;letter-spacing:6px;font-weight:bold;-webkit-text-stroke:1px#000;-text-shadow:002pxred;+text-shadow:002pxred,002pxred,002pxred,002pxred,002pxred,002pxred,002pxred,002pxred,002pxred,002pxred;}哇哦，不仔细看，用这种叠加多层文字-阴影的方式，真的很像边框！当然，如果我们放大，瑕疵会更明显，我们仍然可以看到它是一个阴影：CodePenDemo--Usetext-shadowtoaddborderstotext[3]我们是否用完了选项？不，还有终极杀手SVG。尝试方法三：使用SVGfeMorphology滤镜给文字加边框其实使用SVGfeMorphology滤镜可以完美满足这个需求。我对这项技术很感兴趣！本文也提到了不规则边界[4]的生成方案。借用feMorphology的扩展能力，为不规则形状添加边框。直接上传代码：

粗体文本CSS

p{font-size:64px;letter-spacing:6px;font-weight:bold;-webkit-text-stroke:2px#000;filter:url(#dilate);}效果如下：我们可以通过SVG中的半径来控制边框大小feMorphology过滤器，feFlood过滤器中的泛色控制边框颜色。而且这里的SVG代码可以任意放置，只需要在CSS中使用filter导入即可。本文不对SVG滤镜做过多解释。如果你对SVG滤镜的原理感兴趣，可以看我上面提到的那篇文章。至此，我们已经在使用font-weight:bold和-webkit-text-stroke的基础上完美实现了给文字添加不同颜色边框的需求。放大的话，这样生成的frame是真实的frame，没有任何模糊：CodePenDemo--UseSVGfeMorphologyfiltertoaddaframetotext[5]参考文献[1]CodePenDemo--font-weight:Boldand-webkit-text-stroke双粗体文本：https://codepen.io/Chokcoco/pen/gOxwEvo[2]CodePenDemo--使用伪元素为粗体文本添加边框：https://codepen。io/Chokcoco/pen/ExvgLNm[3]CodePen演示——使用文本阴影为文本添加边框：https://codepen.io/Chokcoco/pen/porEVeg[4]有趣！不规则边框的生成方案：https://github.com/chokcoco/iCSS/issues/106[5]CodePenDemo--使用SVGfeMorphologyfilter给文本添加边框：https://codepen.io/Chokcoco/pen/GRvjdMz