乐趣区

关于前端:CSS-奇技淫巧-巧妙实现文字二次加粗再加边框

jiezi

本文将通过一个理论的业务需要，解说如何实现

  1. 极其场景下文字加粗加边框成果
  2. 文字多重边框的成果

需要背景 – 文字的二次加粗

明天遇到这样一个有意思的问题：

  1. 在文字展现的时候，利用了 font-weight: bold 给文字进行加粗，然而感觉还是不够粗，有什么方法可能让文字更粗一点呢？

emm，不思考兼容性的话，答案是能够利用文字的 -webkit-text-stroke 属性，给文字二次加粗。

[MDN – 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，让文字变得更为 粗。

CodePen Demo — font-weight: bold 和 -webkit-text-stroke 二次加粗文字

如何给二次加粗的文字再增加边框？

OK，实现了上述第一步，事件还没完，更可怕的问题来了。

当初文字要在二次加粗的状况下，再增加一个不同色彩的边框。

咱们把本来可能能够给文字增加边框的 -webkit-text-stroke 属性用掉了，这下事件变得有点辣手了。这个问题也能够转变为，如何给文字增加 2 层不同色彩的边框？

当然，这也难不倒弱小的 CSS（SVG），让咱们来尝试下。

尝试办法一：应用文字的伪元素放大文字

第一种尝试办法，有点麻烦。咱们能够对每一个文字进行精细化解决，利用文字的伪元素略微放大一点文字，将原文字和访达后的文字贴合在一起。

  1. 将文字拆分成一个一个独立元素解决
  2. 利用伪元素的 attr() 个性，利用元素的伪元素实现同样的字
  3. 放大伪元素的字
  4. 叠加在原文字之下

上代码：

<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;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        color: red;
        -webkit-text-stroke: 3px #f00;
        z-index: -1;
        transform: scale(1.15);
    }
}

能够简略给上述成果加个动画，一看就懂：

CodePen Demo — 利用伪元素给加粗文字增加边框

看着不错，然而实际上仔细观察，边框成果很毛糙，文字每一处并非规定的被笼罩，成果不太能承受：

尝试办法二：利用 text-shadow 模仿边框

第一种办法宣告失败，咱们持续尝试第二种形式，利用 text-shadow 模仿边框。

咱们能够给二次加粗的文字增加一个文字暗影：

<p> 文字加粗 CSS</p>
p {
    font-size: 48px;
    letter-spacing: 6px;
    font-weight: bold;
    -webkit-text-stroke: 1px #000;
    text-shadow: 0 0 2px red;
}

看看成果：

好吧，这和边框差的也太远了，它就是暗影。

不过别着急，text-shadow 是反对多重暗影的，咱们把上述的 text-shadow 多叠加几次：

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

Wow，不认真看的话，利用这种叠加多层 text-shadow 的形式，还真的十分像边框！

当然，如果咱们放大来看，瑕疵就比拟显著了，还是能看出是暗影：

CodePen Demo — 利用 text-shadow 给文字增加边框

尝试办法四：利用多重 drop-shadow()

在尝试了 text-shadow 之后，自然而然的就会想到多重 filter: drop-shadow()，主观上认为会和多重 text-shadow 的成果应该是统一的。

不过，实际出真知。

在理论测试中，发现利用 filter: drop-shadow() 的成果比多重 text-shadow 要好，含糊感会弱一些：

p {
    font-weight: bold;
    -webkit-text-stroke: 1px #000;
    filter: 
        drop-shadow(0 0 0.25px red) 
        drop-shadow(0 0 0.25px red) 
        drop-shadow(0 0 0.25px red) 
        drop-shadow(0 0 0.25px red) 
        drop-shadow(0 0 0.25px red) 
        drop-shadow(0 0 0.25px red) 
        drop-shadow(0 0 0.25px red) 
        drop-shadow(0 0 0.25px red) 
        drop-shadow(0 0 0.25px red) 
        drop-shadow(0 0 0.25px red) 
        drop-shadow(0 0 0.25px red);
}

成果如下:

咱们甚至能够利用它制作文字二次加粗后的多重边框：

p {
    font-weight: bold;
    -webkit-text-stroke: 1px #000;
    filter: 
        drop-shadow(0 0 0.2px red) 
        // 反复 N 次
        drop-shadow(0 0 0.2px red)
        drop-shadow(0 0 0.25px blue) 
        // 反复 N 次
        drop-shadow(0 0 0.25px blue);
}

成果如下：

然而，在不同屏幕下（高清屏和一般屏），drop-shadow() 的体现成果差异十分之大，实则也难堪重用。

咱们没有方法了吗？不，还有终极杀手锏 SVG。

尝试办法四：利用 SVG feMorphology 滤镜给文字增加边框

其实利用 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 的根底上，再给文字增加不一样色彩的边框的需要。

放大了看，这种形式生成的边框，是 真边框，不带任何的含糊：

CodePen Demo — 利用 SVG feMorphology 滤镜给文字增加边框

最初

OK，本文到此结束，介绍了一些 CSS 中的奇技淫巧去实现文字二次加粗后加边框的需要，理论需要中，如果不是要求任意字都要有这个成果，其实我更举荐切图大法，高保真，不失落细节。

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

心愿本文对你有所帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

退出移动版