本文將通過(guò)一個(gè)實(shí)際的業(yè)務(wù)需求，講解如何實(shí)現(xiàn)

1. 極端場(chǎng)景下文字加粗加邊框效果
2. 文字多重邊框的效果

需求背景 - 文字的二次加粗

今天遇到這樣一個(gè)有意思的問(wèn)題：

1. 在文字展示的時(shí)候,，利用了 font-weight: bold 給文字進(jìn)行加粗,，但是覺(jué)得還是不夠粗，有什么辦法能夠讓文字更粗一點(diǎn)呢,？

emm,，不考慮兼容性的話(huà)，答案是可以利用文字的 -webkit-text-stroke 屬性,，給文字二次加粗,。

[MDN - webkit-text-stroke]( 'MDN - webkit-text-stroke')：該屬性為文本字符添加了一個(gè)邊框（筆鋒），指定了邊框的寬和顏色,， 它是 -webkit-text-stroke-width 和 -webkit-text-stroke-color 屬性的縮寫(xiě),。

看下面的 DEMO，我們可以利用 -webkit-text-stroke,，給文字二次加粗：

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;
}

對(duì)比一下下面 4 種文字,，最后一種利用了 font-weight: bold 和 -webkit-text-stroke，讓文字變得更為粗,。

CodePen Demo -- font-weight: bold 和 -webkit-text-stroke 二次加粗文字^[1]

如何給二次加粗的文字再添加邊框,？

OK，完成了上述第一步,，事情還沒(méi)完,，更可怕的問(wèn)題來(lái)了。

現(xiàn)在文字要在二次加粗的情況下,，再添加一個(gè)不同顏色的邊框,。

我們把原本可能可以給文字添加邊框的 -webkit-text-stroke 屬性用掉了，這下事情變得有點(diǎn)棘手了,。這個(gè)問(wèn)題也可以轉(zhuǎn)變?yōu)?，如何給文字添加 2 層不同顏色的邊框,？

這還不簡(jiǎn)單，設(shè)計(jì)師,，圖來(lái),。

當(dāng)然，這也難不倒強(qiáng)大的 CSS（SVG）,，讓我們來(lái)嘗試下。

嘗試方法一：使用文字的偽元素放大文字

第一種嘗試方法,，有點(diǎn)麻煩,。我們可以對(duì)每一個(gè)文字進(jìn)行精細(xì)化處理，利用文字的偽元素稍微放大一點(diǎn)文字,，將原文字和訪(fǎng)達(dá)后的文字貼合在一起,。

1. 將文字拆分成一個(gè)一個(gè)獨(dú)立元素處理
2. 利用偽元素的 attr() 特性，利用元素的偽元素實(shí)現(xiàn)同樣的字
3. 放大偽元素的字
4. 疊加在原文字之下

上代碼：

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);
    }
}

可以簡(jiǎn)單給上述效果加個(gè)動(dòng)畫(huà),，一看就懂：

CodePen Demo -- 利用偽元素給加粗文字添加邊框^[2]

看著不錯(cuò),，但是實(shí)際上仔細(xì)觀察，邊框效果很粗糙,，文字每一處并非規(guī)則的被覆蓋,，效果不太能接受：

嘗試方法二：利用 text-shadow 模擬邊框

第一種方法宣告失敗，我們繼續(xù)嘗試第二種方式,，利用 text-shadow 模擬邊框,。

我們可以給二次加粗的文字添加一個(gè)文字陰影：

p {
    font-size: 48px;
    letter-spacing: 6px;
    font-weight: bold;
    -webkit-text-stroke: 1px #000;
    text-shadow: 0 0 2px red;
}

看看效果：

好吧，這和邊框差的也太遠(yuǎn)了,，它就是陰影,。

不過(guò)別著急，text-shadow 是支持多重陰影的,，我們把上述的 text-shadow 多疊加幾次：

Wow,，不仔細(xì)看的話(huà)，利用這種疊加多層 text-shadow 的方式,，還真的非常像邊框,！

當(dāng)然，如果我們放大來(lái)看,，瑕疵就比較明顯了,，還是能看出是陰影：

CodePen Demo -- 利用 text-shadow 給文字添加邊框^[3]

我們沒(méi)有辦法了嗎？不,，還有終極殺手锏 SVG,。

嘗試方法三：利用 SVG feMorphology 濾鏡給文字添加邊框

其實(shí)利用 SVG 的 feMorphology 濾鏡，可以非常完美的實(shí)現(xiàn)這個(gè)需求,。

這個(gè)技巧,，我在 有意思,！不規(guī)則邊框的生成方案^[4] 這篇文章中也有提及。

借用 feMorphology 的擴(kuò)張能力給不規(guī)則圖形添加邊框,。

直接上代碼：

<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>

效果如下:

我們可以通過(guò) SVG feMorphology 濾鏡中的 radius 控制邊框大小,，feFlood 濾鏡中的 flood-color 控制邊框顏色。并且,，這里的 SVG 代碼可以任意放置,，只需要在 CSS 中利用 filter 引入即可。

本文不對(duì) SVG 濾鏡做過(guò)多的講解,，對(duì) SVG 濾鏡原理感興趣的,，可以翻看我上述提到的文章。

至此,，我們就完美的實(shí)現(xiàn)了在已經(jīng)利用 font-weight: bold 和 -webkit-text-stroke 的基礎(chǔ)上,，再給文字添加不一樣顏色的邊框的需求。

放大了看,，這種方式生成的邊框,，是真邊框，不帶任何的模糊：

CodePen Demo -- 利用 SVG feMorphology 濾鏡給文字添加邊框^[5]

最后

當(dāng)然,，可能還有更便捷更有意思的解法,，歡迎在評(píng)論區(qū)不吝賜教。

本文到此結(jié)束,，希望對(duì)你有幫助 :)

如果還有什么疑問(wèn)或者建議,，可以多多交流，原創(chuàng)文章,，文筆有限,，才疏學(xué)淺，文中若有不正之處,，萬(wàn)望告知,。

參考資料