CSS Wonderful Skills | Ingeniously realize the second bold text and then add borders

This article will explain how to achieve it through a practical business requirement

1. Bold text and border effect in extreme scenes
2. The effect of multiple borders of text

Requirements background-double bolding of text

Encountered such an interesting question today:

1. When displaying the text, I used font-weight: bold to make the text bold, but I still feel that it is not thick enough. Is there any way to make the text bolder?

emm, if compatibility is not considered, the answer is that you can use the -webkit-text-stroke attribute of the text to bold the text twice.

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

Looking 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 four languages, the last use of the font-weight: bold and -webkit-text-stroke , so that the text becomes more crude .

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

How to add a border to the twice-bold text?

OK, after completing the first step above, things are not over yet, more terrible problems are coming.

Now the text needs to be bolded twice, and then add a border of a different color.

-webkit-text-stroke attribute that might have been able to add a border to the text, and things became a bit 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 difficult to beat the powerful CSS (SVG), let's try it.

Try method 1: 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-element of the text to slightly enlarge the text, and paste the original text and the text after the visit.

1. Split the text into individual elements for processing
2. Use the attr() feature of the pseudo-element, and use the pseudo-element of the element to achieve the same word
3. Enlarge pseudo-element words
4. Superimposed under the original text

On the 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 can understand it at a glance:

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

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

Try method 2: Use text-shadow to simulate borders

The first method failed, we continue to try the second method, using text-shadow 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;
}

See the effect:

Well, this is too far from the border, it is the shadow.

But don’t worry, text-shadow supports multiple shadows. We 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 frame!

Of course, if we zoom in, the blemishes are more obvious, and we can still see the shadows:

CodePen Demo - Use text-shadow to add borders to text

Try method three: use multiple drop-shadow()

After trying text-shadow , I naturally think of multiple filter: drop-shadow() , subjectively thinking that text-shadow should be the same.

However, real knowledge comes from practice.

In the actual test, it is found that filter: drop-shadow() is better than that of multiple text-shadow , and the ambiguity will be weaker:

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

The effect is as follows:

We can even use it to make multiple borders after the text is twice bolded:

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

The effect is as follows:

However, under different screens (HD screen and normal screen), drop-shadow() is very different, and it is actually embarrassing to reuse.

Is there no way we can do it? No, there is the ultimate killer SVG.

Try method 4: Use the SVG feMorphology filter to add a border to the text

In fact, using SVG's feMorphology filter can perfectly fulfill this requirement.

This technique is interesting to The irregular border generation scheme is also mentioned in this article.

borrows the expansion capability of feMorphology to add borders to irregular graphics .

Directly on the code:

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

The effect is as follows:

We can filter by SVG feMorphology in radius control the border size, feFlood filter in flood-color control border color. In addition, the SVG code here can be placed arbitrarily, as long as it is introduced in the CSS using a filter.

This article does not give too much explanation on the SVG filter. If you are interested in the principle of SVG filter, you can read the article I mentioned above.

At this point, we have perfectly realized the -webkit-text-stroke to add a different color border to the text based on the font-weight: bold and 0617a16a2ae1da.

Zooming in, the frame generated in this way is true frame without any blur:

CodePen Demo - Use SVG feMorphology filter to add border to text

finally

OK, this is the end of this article. I have introduced some tricks in CSS to achieve the requirement of adding a border after the text is bolded twice. In actual needs, if this effect is not required for any word, I actually recommend cutting it. Picture Dafa, high fidelity, without losing details.

Of course, there may be more convenient and more interesting solutions, please feel free to give us advice in the comment area.

Hope this article is helpful to you :)

Want to get the most interesting CSS information, don’t miss my public - 1617a16a2ae2aa iCSS front-end interesting 1617a16a2ae2ac 😄

More wonderful CSS technical articles are summarized in my Github - iCSS , which will be updated continuously. Welcome to click a star to subscribe to the collection.

If you have any questions or suggestions, you can exchange more, original articles, limited writing style, and lack of knowledge. If there are any irregularities in the article, please let me know.