It is common to see specially processed header text in some Web active pages, such as this one

Ignoring the special fonts for the moment, we can see from the layer styles of the design that there are three text effects: gradient, Stroke and drop shadow

As a desirable front end, of course, it will not use images directly. Here are two ways to implement CSS and SVG, let’s have a look

Tips: the article is more details, not interested in the online demo can also jump directly to the bottom

CSS text gradient

Let’s start with the implementation in CSS.

CSS does not have a direct property to set text gradients, usually the text must be a solid color. However, you can use background-clip to make the background color appear in the text area, which looks like the text has a gradient

<p class="text">Find wonderful custom for you</p>
Copy the code
.text{
  background-image: linear-gradient(#FFCF02.#FF7352);
  background-clip: text;
  -webkit-background-clip: text;
}
Copy the code

But that doesn’t work, the text is still the default color, right

The reason is actually very simple. Since it is a cropped background, the final display is actually the background color, and the colored text is overlaid on the background. Therefore, it is necessary to set the text color to transparent, which can be achieved with color and -webkit-text-fel-color.

.text{
  background-image: linear-gradient(#FFCF02.#FF7352);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* Requires text transparency */
}
Copy the code

Now you can see the text gradient

SVG text gradient

Take a look at text gradients in SVG.

Text gradient is naturally supported in SVG, so text can be treated as a normal vector path, as shown below

<svg>
  <text>Find wonderful custom for you</text>
</svg>
Copy the code

You can fill it directly with fill, but note that it’s a little bit more difficult to fill. Instead of using a gradient like CSS, you must use a special gradient tag . Interested can look at that linearGradient – SVG | MDN (mozilla.org), which need to be defined in the < defs > < / defs > 

<svg>
  <defs>
    <linearGradient id="gradient">
      <stop offset="0%"  stop-color="#FFCF02"/>
      <stop offset="100%"  stop-color="#FF7352"/>
    </linearGradient>
  </defs>
  <text class="text">Find wonderful custom for you</text>
</svg>
Copy the code

The < Stop > tag in is used to define the gradient color gradient. Offset and stop-color define the gradient node and color, respectively. Then fill the gradient with the fill attribute (specifying the ID). 

.text{
  fill: url(#gradient);
}
Copy the code

It looks like this.

There are two problems with this

  1. The text is not centered horizontally or vertically
  2. The gradient direction is horizontal to the right

Let’s start with the first question. The adaptive processing of text in SVG is still very weak. For example, the common wrapping in CSS, SVG can only be wrapped manually in a specified position. Here, two attributes, text-anchor and domination-baseline, are needed to center, marking the text anchor point alignment and text baseline alignment respectively. Simply speaking, it is the horizontal and vertical alignment

.text{
  text-anchor: middle;
  dominant-baseline: middle;
  fill: url(#gradient);
}
Copy the code


also needs to set the x and y positions, which are similar to the percentage of background positions in CSS

<text class="text" x="50%" y="50%">Find wonderful custom for you</text>
Copy the code

So it’s centered

In SVG, the direction of the gradient is determined by the coordinates x1, y1, x2, and y2. Given a rectangle, the top left corner is [0,0] and the bottom right corner is [1, 1], so that any Angle can be represented

set x1=”0″ y1=”0″ x2=”0″ y2=”1″, as follows 

<svg>
  <defs>
    <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%"  stop-color="#FFCF02"/>
      <stop offset="100%"  stop-color="#FF7352"/>
    </linearGradient>
  </defs>
  <text class="text">Find wonderful custom for you</text>
</svg>
Copy the code

Results the following

3. CSS text Stroke

CSS has a property for text stroke – webKit-text-stroke, which controls stroke width and color, for example

.text{
  -webkit-text-stroke: 2px # 333;
}
Copy the code

Results the following

It does have a stroke, but the text seems to be thinner. If it’s not obvious, you can make it bigger

From here, you can see that -webkit-text-stroke is really centered stroke and overlays the text, and you can’t change the stroke. In fact, many design tools have stroke options, such as Figma

So, how to achieve the outer stroke effect?

That’s ok! Use two layers of text, one for stroke and one for gradient. To save labels, use pseudo-elements

<p class="text" data-title="Customized for you to find wonderful.">Find wonderful custom for you</p>
Copy the code

::before sets gradient at the top, and the original text sets stroke at the bottom, making sure to remove the -webkit-text-stroke from ::before

.text::before{
    content: attr(data-title);
    position: absolute;
    background-image: linear-gradient(#FFCF02.#FF7352);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0;
}
.text{
    -webkit-text-stroke: 6px # 333;
}
Copy the code

Superposition is shown as follows

Changing strokes does not make the text “thinner”

SVG text stroke

SVG can also achieve stroke effects, similar to CSS, which borrows from SVG to control stroke color and size via stroke and stroke-width, for example

.text{
  / * * /
  stroke-width: 4px;
  stroke: # 333;
}
Copy the code

You can get something like this

Just like CSS, they are centered strokes and cannot be changed.

However, SVG controls are more flexible. The default is to fill first and then stroke, so the stroke appears to be on top of the fill. However, we can change this rule to set stroke first and then fill so that the fill color is overlaid on top of the stroke. This rule can be changed in SVG using paint-order. CSS paint-Order can be changed in SVG using paint-Order

.text{
  / * * /
  stroke-width: 4px;
  stroke: # 333;
  paint-order: stroke; /* First stroke */
}
Copy the code

This achieves the effect of external stroke, is not more convenient than CSS?

In addition, SVG can also set the shape of the corner of the stroke path. For example, in Figma, the corner is set as follows

The corresponding property in SVG is called stroke-lineJoin, which is rounded and can be set as follows

.text{
  / * * /
  stroke-width: 4px;
  stroke: # 333;
  paint-order: stroke; /* First stroke */
  stroke-linejoin: round; /* Path Angle is rounded */
}
Copy the code

The effects of various attributes are as follows

5. CSS text projection

Continue adding effects. CSS can use text-shadow to add text shadows

.text{
    -webkit-text-stroke: 6px # 333;
  	text-shadow: 0 4px 0 # 333;
}
Copy the code

And it turns out to be something like this

The reason also has to do with the gradient of the text, which is actually the background color. The text is transparent, so if you add a shadow to the text, the shadow overlays the background. In addition to using text-shadow, this can also be done with a drop-shadow filter

.text{
  -webkit-text-stroke: 6px # 333;
  filter: drop-shadow(0 4px 0 # 333);
}
Copy the code

And that’s perfect

Vi. SVG text projection

SVG is more flexible, such as the drop-shadow filter used above, which is actually borrowed from SVG filters, so SVG can be implemented in the same way

<svg>
    <defs>
        <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%"  stop-color="#FFCF02"/>
          <stop offset="100%"  stop-color="#FF7352"/>
        </linearGradient>
      	<filter id="shadow">
            <feDropShadow dx="0" dy="4" stdDeviation="0" flood-color="# 333"/>
        </filter>
    </defs>
    <text x="50%" y="50%" class="text">Find wonderful custom for you</text>
</svg>
Copy the code

Here, the parameters in dx,dy,stdDeviation,flood-color and drop-shadow(dx,dy,stdDeviation,flood-color) are one-to-one corresponding, so there is not much to explain. Then apply the filter in the text

.text{
  / * * /
  filter:url(#shadow);
}
Copy the code

This can also achieve text projection

Text-shadow is not used in SVG because the CSS text gradient is a background, which is a fake text gradient, but in SVG it is a real positive gradient, so yes, This can be done using CSS text-shadow directly. SVG and CSS are now interchangeable with many attributes and styles, as shown below

.text{
  / * * /
  fill: url(#gradient);
  text-shadow: 0 4px 0 # 333;
}
Copy the code

More concise implementation

Seven, special font processing

Usually there are some special fonts for the title of the activity. English fonts are ok, the whole introduction is ok, but Chinese fonts are not ok, most Chinese fonts are very large, maybe tens or hundreds of MB. In fact, we only need to use the font that appears. If the special font that appears in this part of the text is extracted separately, then the whole font file will be greatly reduced. This process is called font subset.

So how to deal with it?

Here recommend a tool Fontmin – font subset scheme, about the principle of font subset, you can refer to this article: performance optimization wizard: Chinese font practice – gold

After downloading the client, import the font file. TTF and enter the required text as follows

Click Generate to get the following files

The first CSS with -embed as the suffix, which is converted base64 after the file, can be directly introduced

@font-face {
    font-family: "HYLiLiangHeiJ Regular";
    src: url("HYLiLiangHeiJ Regular.eot"); /* IE9 */
    src: url("HYLiLiangHeiJ Regular.eot? #iefix") format("embedded-opentype"), /* IE6-IE8 */
    url(data:application/x-font-ttf; charset=utf-8; base64,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 PUAAwPoAAAAAM58+bMAAAAA3R9/YwAj/08D0QLzAAAADAABAAAAAAAAAAEAAAOV/rkAAAPoACMAFwPRAAEAAAAAAAAAAAAAAAAAAAABA+gAAAAzACgAJAAkA CwAKwAoACMAAAAAAC4AcgC2APgBMAGOAcwCMgABAAAACQBGAAkAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAEADGAAEAAAAAAAAAPAAAAAEAAAAAAAEAEwA8A AEAAAAAAAIABwBPAAEAAAAAAAMAIQBWAAEAAAAAAAQAGwB3AAEAAAAAAAUADACSAAEAAAAAAAYADQCeAAEAAAAAAAcAEgCrAAMAAQQJAAAAeAC9AAMAAQQJA AEAGAE1AAMAAQQJAAIADgFNAAMAAQQJAAMAQgFbAAMAAQQJAAQAKAGdAAMAAQQJAAUAGAHFAAMAAQQJAAYAGgHdAAMAAQQJAAcAJAH3KGMpIENvcHlyaWdod CBCZWlqaW5nIEhBTllJIEtFWUlOIEluZm9ybWF0aW9uIFRlY2hub2xvZ3kgQ28ubElOw6pSwpvCkcOPwp7DkXvCgFJlZ3VsYXJIYW55aSBIWUxpTGlhbmdIZ WlKIFJlZ3VsYXIgdjUuMDBsSU7DqlLCm8KRw4/CnsORe8KAIFJlZ3VsYXJWZXJzaW9uIDUuMDBIWUxpTGlhbmdIZWlKVHJhZGVtYXJrIG9mIEhBTllJACgAY wApACAAQwBvAHAAeQByAGkAZwBoAHQAIABCAGUAaQBqAGkAbgBnACAASABBAE4AWQBJACAASwBFAFkASQBOACAASQBuAGYAbwByAG0AYQB0AGkAbwBuACAAV ABlAGMAaABuAG8AbABvAGcAeQAgAEMAbwAuAGwASQBOAOoAUgCbAJEAzwCeANEAewCAAFIAZQBnAHUAbABhAHIASABhAG4AeQBpACAASABZAEwAaQBMAGkAY QBuAGcASABlAGkASgAgAFIAZQBnAHUAbABhAHIAIAB2ADUALgAwADAAbABJAE4A6gBSAJsAkQDPAJ4A0QB7AIAAIABSAGUAZwB1AGwAYQByAFYAZQByAHMAa QBvAG4AIAA1AC4AMAAwAEgAWQBMAGkATABpAGEAbgBnAEgAZQBpAEoAVAByAGEAZABlAG0AYQByAGsAIABvAGYAIABIAEEATgBZAEkAAAAAAgAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAACQAJAAABAgEDAQQBBQEGAQcBCAEJB3VuaTRFM0EHdW5pNEY2MAd1bmk1MjM2B3VuaTUzRDEHdW5pNUI5QQd1bmk1RjY5B 3VuaTczQjAHdW5pN0NCRQ==) format("truetype"/* Chrome, Firefox, Opera, Safari, Android, iOS4.2+ * /url("HYLiLiangHeiJ Regular.svg#HYLiLiangHeiJ Regular") format("svg"); / * iOS 4.1 - * /
    font-style: normal;
    font-weight: normal;
}
.text{
  /* Other styles */
  font-family: "HYLiLiangHeiJ Regular";
}
Copy the code

This almost achieves the same effect as the design draft

In fact, if you look down from the beginning, you should be able to achieve one yourself, not only to grasp the principle, but also to deepen the impression, completely become their own. However, not everyone has the time or the quiet time to study every case, so here is the online demo. If you want to see the results quickly, you can access it directly, as follows

CSS implementation can access text-CSS (codepen.io)

SVG implementations can access text-svg (codepen.io)

Viii. Summary and explanation

There are two different ways to create special effects with text: CSS and SVG. SVG is clearly superior in terms of effects, such as smoother strokes and no need for multiple layers of nesting, but CSS also has advantages, such as simpler gradients and shadows, to summarize

  1. CSS text gradient is the essence of the background clipping, you need to set the text color to transparent
  2. SVG text naturally supports gradient filling, using the linearGradient tag
  3. SVG text center is a bit troublesome, requiring the use of text-anchor and morning-baseline
  4. Both CSS and SVG strokes are centered and cannot be changed
  5. CSS outer stroke can be achieved by stacking multiple layers of structure
  6. SVG allows the fill to be drawn over the stroke using paint-order
  7. The CSS text shadow will pass through when the text is transparent. You can use drop-shadow to simulate the shadow
  8. FeDropShadow in SVG is similar to drop-shadow in CSS
  9. SVG can directly use text-shadow in CSS for text projection
  10. Font subsets fontmin

CSS and SVG have their own advantages and influence each other. Many CSS styles can be used in SVG, and MANY SVG attributes have been introduced in CSS. In daily development, you can fully combine the advantages of both. Finally, if you think it’s good and helpful, please like, bookmark and retweet ❤❤❤