本文将通過一個實際的業務需求，講解如何實作
極端場景下文字加粗加邊框效果
文字多重邊框的效果
今天遇到這樣一個有意思的問題：
在文字展示的時候，利用了 <code>font-weight: bold</code> 給文字進行加粗，但是覺得還是不夠粗，有什麼辦法能夠讓文字更粗一點呢？
emm，不考慮相容性的話，答案是可以利用文字的 <code>-webkit-text-stroke</code> 屬性，給文字二次加粗。
MDN - webkit-text-stroke： 該屬性為文本字元添加了一個邊框（筆鋒），指定了邊框的寬和顔色， 它是 <code>-webkit-text-stroke-width</code> 和 <code>-webkit-text-stroke-color</code> 屬性的縮寫。
看下面的 DEMO，我們可以利用 <code>-webkit-text-stroke</code>，給文字二次加粗：
對比一下下面 4 種文字，最後一種利用了 <code>font-weight: bold</code> 和 <code>-webkit-text-stroke</code>，讓文字變得更為粗。
CodePen Demo -- font-weight: bold 和 -webkit-text-stroke 二次加粗文字
OK，完成了上述第一步，事情還沒完，更可怕的問題來了。
現在文字要在二次加粗的情況下，再添加一個不同顔色的邊框。
我們把原本可能可以給文字添加邊框的 <code>-webkit-text-stroke</code> 屬性用掉了，這下事情變得有點棘手了。這個問題也可以轉變為，如何給文字添加 2 層不同顔色的邊框？
當然，這也難不倒強大的 CSS（SVG），讓我們來嘗試下。
第一種嘗試方法，有點麻煩。我們可以對每一個文字進行精細化處理，利用文字的僞元素稍微放大一點文字，将原文字和訪達後的文字貼合在一起。
将文字拆分成一個一個獨立元素處理
利用僞元素的 <code>attr()</code> 特性，利用元素的僞元素實作同樣的字
放大僞元素的字
疊加在原文字之下
上代碼：
可以簡單給上述效果加個動畫，一看就懂：
CodePen Demo -- 利用僞元素給加粗文字添加邊框
看着不錯，但是實際上仔細觀察，邊框效果很粗糙，文字每一處并非規則的被覆寫，效果不太能接受：
第一種方法宣告失敗，我們繼續嘗試第二種方式，利用 <code>text-shadow</code> 模拟邊框。
我們可以給二次加粗的文字添加一個文字陰影：
看看效果：
好吧，這和邊框差的也太遠了，它就是陰影。
不過别着急，<code>text-shadow</code> 是支援多重陰影的，我們把上述的 <code>text-shadow</code> 多疊加幾次：
Wow，不仔細看的話，利用這種疊加多層 <code>text-shadow</code> 的方式，還真的非常像邊框！
當然，如果我們放大來看，瑕疵就比較明顯了，還是能看出是陰影：
CodePen Demo -- 利用 text-shadow 給文字添加邊框
在嘗試了 <code>text-shadow</code> 之後，自然而然的就會想到多重 <code>filter: drop-shadow()</code>，主觀上認為會和多重 <code>text-shadow</code> 的效果應該是一緻的。
不過，實踐出真知。
在實際測試中，發現利用 <code>filter: drop-shadow()</code> 的效果比多重 <code>text-shadow</code> 要好，模糊感會弱一些：
效果如下:
我們甚至可以利用它制作文字二次加粗後的多重邊框：
效果如下：
然而，在不同螢幕下（高清屏和普通屏），<code>drop-shadow()</code> 的表現效果差别非常之大，實則也難堪重用。
我們沒有辦法了嗎？不，還有終極殺手锏 SVG。
其實利用 SVG 的 feMorphology 濾鏡，可以非常完美的實作這個需求。
這個技巧，我在 有意思！不規則邊框的生成方案 這篇文章中也有提及。
借用 feMorphology 的擴張能力給不規則圖形添加邊框。
直接上代碼：
我們可以通過 SVG feMorphology 濾鏡中的 <code>radius</code> 控制邊框大小，feFlood 濾鏡中的 <code>flood-color</code> 控制邊框顔色。并且，這裡的 SVG 代碼可以任意放置，隻需要在 CSS 中利用 filter 引入即可。
本文不對 SVG 濾鏡做過多的講解，對 SVG 濾鏡原理感興趣的，可以翻看我上述提到的文章。
至此，我們就完美的實作了在已經利用 <code>font-weight: bold</code> 和 <code>-webkit-text-stroke</code> 的基礎上，再給文字添加不一樣顔色的邊框的需求。
放大了看，這種方式生成的邊框，是真邊框，不帶任何的模糊：
CodePen Demo -- 利用 SVG feMorphology 濾鏡給文字添加邊框
OK，本文到此結束，介紹了一些 CSS 中的奇技淫巧去實作文字二次加粗後加邊框的需求，實際需求中，如果不是要求任意字都要有這個效果，其實我更推薦切圖大法，高保真，不丢失細節。
當然，可能還有更便捷更有意思的解法，歡迎在評論區不吝賜教。
希望本文對你有所幫助 😃
更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。