How to bold text and add borders with CSS (skill sharing)

How to bold text twice and add borders in css? The following article will introduce to you how to use CSS to make text bold and add borders. I hope it will be helpful to you!

This article will explain how to achieve the

• text bold and border effect in extreme scenarios through a practical business requirement

• The effect of multiple borders on text

Requirement background - secondary bolding of text

I encountered such an interesting problem today :

• When displaying text, I used font-weight: bold to bold the text, but I think it is still not bold enough. Is there any way to make the text bold? What about thicker?

emm, if compatibility is not considered, the answer is that you can use the -webkit-text-stroke attribute of the text to make the text bold twice. (Learning video sharing: css video tutorial)

MDN - webkit-text-stroke: This attribute adds a border (stroke) to the text character and specifies the width of the border and color, which is the abbreviation of the -webkit-text-stroke-width and -webkit-text-stroke-color properties.

Look at the DEMO below, we can use -webkit-text-stroke to bold the text twice:

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

Compare the following 4 types of text, the last one This uses font-weight: bold and -webkit-text-stroke to make the text bold.

CodePen Demo -- font-weight: bold and -webkit-text-stroke secondary bold text

https://codepen .io/Chokcoco/pen/gOxwEvo

How to add a border to twice bold text?

OK, after completing the first step above, the matter is not over yet, and a more terrifying problem has come.

Now the text needs to be bolded twice and a border of a different color is added.

We used the -webkit-text-stroke attribute that might have been used to add a border to the text, and now things get a little tricky. This question can also be transformed into, how to add 2 layers of borders of different colors to the text?

Of course, this is not a problem with the powerful CSS (SVG), let’s try it.

Try method one: Use pseudo-elements of text to enlarge text

The first method to try is a bit troublesome. We can refine each text, use the pseudo elements of the text to slightly enlarge the text, and fit the original text and the retrieved text together.

• Split the text into independent elements for processing

• Use the attr() feature of pseudo-element, use The pseudo-element of the element implements the same text

• enlarges the pseudo-element’s text

• and superimposes it under the original text

Code:

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

You can simply add an animation to the above effect, and you will understand it at a glance:

##CodePen Demo -- Use pseudo elements to add borders to bold text

https://codepen.io/Chokcoco/pen/ExvgLNm

It looks good, but in fact, if you look closely, the border effect is very Rough, every part of the text is not covered regularly, and the effect is not acceptable:

Try method two: Use text-shadow to simulate the border

One method failed, so we continue to try the second method, using

text-shadow to simulate the border.

We can add a text shadow to the twice bold text:

<p>文字加粗CSS</p>

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

Look at the effect:

Okay, this It's too far away from the border, it's just a shadow.

But don’t worry,

text-shadow supports multiple shadows. Let’s overlay the above text-shadow several times:

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, if you don’t look carefully, using this method of superimposing multiple layers of

text-shadow, it really looks like a border!

Of course, if we zoom in, the flaws will be more obvious, and we can still see that they are shadows:

CodePen Demo -- Utilization text-shadow adds a border to text

https://codepen.io/Chokcoco/pen/porEVeg

尝试方法四：利用多重 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>

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 滤镜给文字添加边框

https://codepen.io/Chokcoco/pen/GRvjdMz

最后

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

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

希望本文对你有所帮助 :)

原文地址：https://juejin.cn/post/7023940690476269605

作者：chokcoco

更多编程相关知识，请访问：编程入门！！

The above is the detailed content of How to bold text and add borders with CSS (skill sharing). For more information, please follow other related articles on the PHP Chinese website!