CSS skillfully realizes the secondary bold and border of text

This paper will explain how to implement it through an actual business requirement

Requirement background - Secondary bold text

Today we have an interesting question:

In the text display, the use of font-weight: bold Bold the text, but I don't think it's thick enough. What can I do to make the text thicker?

emm, regardless of compatibility, the answer can be written - webkit-text-stroke Property to double bold the text.

[MDN - WebKit text stroke] (): this attribute adds a border (stroke) for text characters, and specifies the width and color of the border. It is - webkit-text-stroke-width and - webkit-text-stroke-color Property.

Look at the DEMO below. We can use it - WebKit text stroke, bold the text twice:

Text bold CSS Text bold CSS Text bold CSS Text bold CSS

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

How to add a border to the second bold text?

OK, the first step above has been completed. The matter is not over yet. The more terrible problem is coming.

Now add a different color border when the text is bold twice.

We put what might have been able to add a border to the text - webkit-text-stroke The property is used up, which makes things a little tricky. This problem can also be transformed into how to add two layers of borders with different colors to the text?

Of course, this is not difficult to powerful CSS (SVG). Let's try it.

Try method 1: use the pseudo element of the text to enlarge the text

The first method is a little troublesome. We can refine each text, slightly enlarge the text by using the pseudo elements of the text, and paste the original text with the visited text.

Split text into separate elements for processing
Using pseudo elements attr() The pseudo element of the element is used to realize the same word
Enlarge the word of the pseudo element
Overlay under original text

Upper Code:

<ul> <li data-text="writing">writing</li> <li data-text="word">word</li> <li data-text="plus">plus</li> <li data-text="crude">crude</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 animate the above effect

It looks good, but in fact, after careful observation, the border effect is very rough. Every part of the text is not covered regularly, and the effect is not very acceptable.

Try method 2: use text shadow to simulate the border

The first method fails. Let's continue to try the second method text-shadow Simulate border.

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

Text bold CSS

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

Well, it's too far from the border. It's shadow.

But don't worry, text shadow It supports multiple shadows. We put the above text-shadow Stack 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, use this superposition text-shadow The way is really like a border!

Of course, if we zoom in, the defect is more obvious, and we can still see that it is a shadow.

Try method 3: use multiple drop shadow ()

I'm trying text-shadow After that, it's natural to think of multiple Filter: drop shadow(), subjectively think it will be different from multiple text-shadow The effect should be consistent.

However, practice makes true knowledge.

In the actual test, it is found that filter: drop-shadow() The effect is more than text-shadow Better, less fuzzy:

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

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

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

However, under different screens (high-definition screen and normal screen), drop shadow () The performance effect of is very different, but it is also embarrassing to reuse.

Is there nothing we can do? No, there's the ultimate killer, SVG.

Try method 4: use the SVG feMorphology filter to add borders to the text

In fact, this requirement can be perfectly realized by using the feMorphology filter of SVG.

Borrow the expansion ability of feMorphology to add borders to irregular graphics.

Direct code:

Text bold CSS <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); }

We can use in the SVG feMorphology filter radius Controls the size of the border, which is displayed in the feFlood filter flood-color Controls the border color. Moreover, the SVG code here can be placed at will, just by using filter in CSS.

If you want to develop small programs or APP software, you can help you realize your development needs through professional development companies: Xiamen cares about technology -Focus Xiamen applet development , APP development, website development, h5 small game development