Through this article, you can learn:

  1. Method of setting text stroke using CSS properties;
  2. For text stroke properties in the browsertext-strokeAnd its replacement propertiestext-shadowThe application of.

What is text stroketext-stroke

Text-stroke is a CSS compound property used to set or retrieve the stroke of text in an object, and is poorly performed for browser compatibility. It contains two properties, text-stroke-width and text-stroke-color, which set stroke thickness and stroke color, respectively.

Recently, a compatibility issue with text-stroke has been discovered. In some cases, the stroke overlaps and deepens the color of the stroke, which is very bad for the visual experience. Huawei P40, Huawei Mate 30Pro, Huawei Mate 20Pro and other models are found in the wechat mini program. A simple example code is as follows:

<! -- Normal web scene page structure -->
<div class="class-font">White font with black stroke added</div>

<! -- wechat applet scene page structure -->
<view class="class-font">White font with black stroke added</view>
Copy the code
.class-font {
  font-size: 24px;
  color: #fff;
  -webkit-text-stroke: 1px black;
  text-stroke: 1px black;
}
Copy the code

An example of normal and abnormal stroke conditions is shown below:

All kinds of compatibility writing methods have failed to solve this problem. A look at the data reveals that text-stroke doesn’t actually appear in any W3C specification, and it was briefly included in the specification as a text stroke property, but has since been removed.

It also supports this effect only on Firefox and Edge by using the -webkit-text-stroke attribute (no -moz- or -ms- prefixes are supported in browsers).

So what can we do to solve this problem?

Since there is a problem with text-stroke, let’s see if there is another attribute that can replace its effect. It was found in CSS3 that there is a text shadow attribute called text-shadow that can also satisfy our desired effect.

Understand text shadingtext-shadow

Text-shadow is a new property introduced in CSS3 that is used to cast shadows on text and works well with browsers.

A simple application example code is as follows:

.class-font {
  font-size: 24px;
  color: #fff;
  text-shadow: 1px -1px 0 # 000.1px -1px 0 # 000, -1px 1px 0 # 000.1px 1px 0 # 000;
}
Copy the code

The following is an example:

The meaning of the specific attribute value is not described in detail here. You can learn about it by yourself. Here, we will talk about the difference between the visual performance of the two attributes of text-shadow and text-stroke.

Text-stroke is an internal stroke of text and is achieved by squeezing the space inside the text. For example, if a white text stroke is 4px, if the text-stroke is set to a 2px black stroke, the text will look like a 2px black stroke and 2px white fill.

Text-shadow is the outer stroke of the text, which is equivalent to putting a coat on the outside of the text. For the same 4px text stroke line, set the property to a 2px black text shadow. This text will look like a 2px black stroke and a 4px white fill.

In general, the visual performance of the two is slightly different, but they are basically similar when the stroke thickness is set to be relatively small. Moreover, in terms of usage, text-shadow is actually more suitable for the actual application, so we can completely use text-shadow to achieve the stroke effect for text.