CSS 实现描边文字效果

本文，我们将通过 css 来实现文字描边的效果，如下所示👇

说到实现描边文字，我们可以通过见下面的方式实现。

通过 text-shadow

我们是否可以通过使用 text-shadow 来设定其 X轴偏移量 offset-x，Y轴偏移量 offset-y，模糊半径 blur-radius 和颜色 color。从而达到我们想要的效果呢？

设定单个 text-shadow：

CSS 复制代码

.single-text-shadow {
  font-size: 60px;
  font-weight: 900;
  color: pink;
  text-shadow: 5px 5px 0px black;
}

这个只是添加了右下角的文字的阴影，还没有达到我们想要的效果。那么，如果我们叠加多个方向的阴影，会不会达到我们想要的效果呢？👇

css 复制代码

.multiple-text-shadow {
  font-size: 60px;
  font-weight: 900;
  color: pink;
  text-shadow:
    -5px -5px 0px black, /* 左上阴影 */
    5px -5px 0px black,  /* 右上阴影 */
    -5px 5px 0px black,  /* 左下阴影 */
    5px 5px 0px black,   /* 右下阴影 */
    5px 5px 10px rgba(0, 0, 0, 0.3); /* 额外阴影增加立体感 */
}

我们分别在左上角、右上角、左下角和右下角添加 5px 5px 的黑色阴影。效果如下👇

上图中形成的文字描边，效果不连贯，感觉突兀。

通过 text-stroke

那么，我们可以通过使用 text-stoke 来实现。如下代码：

css 复制代码

.text-stoke {
  font-size: 60px;
  font-weight: 900;
  color: #ffb6c1;
  -webkit-text-stoke: 4px #7742d7; /* 设置描边的宽度和颜色 */
  text-stroke: 4px #7742d7;
}

效果如下图👇

咦，不错哦。是我们想要的效果。

但是，我们还需要注意下面的使用：

1. 字体的变更需要调整为不同地区的字体。比如台湾字体和我们平时常用的字体效果

css 复制代码

// 大陆简体中文字体
@font-face {
    font-family: "font-family-cn-mainland";
    src: url("path/to/fonts/AlibabaPuHuiTi.woff"); 
}

// 台湾繁体中文字体
@font-face {
    font-family: "font-family-cn-tw";
    src: url("path/to/fonts/MOESongUN.ttf");
}

细心的读者就会发现，这里文字是白色，描边的黑色。如果你换成另外一种字体，展示也会不相同。特别是针对不同用户习惯，就比如这个选字，不同的繁体字也有不同的写法。

2. 应用渐变的色到文字

为了使得文字的色彩更加鲜艳，我们可以使用渐变色。

CSS 复制代码

.text-stroke {
  /* 其他... */
  background: linear-gradient(to right, #f00, #000); /* 从左往右边渐变，红色渐变到黑色 */
  -webkit-background-clip: text; /* 背景颜色限定在文字 */
  -webkit-text-fill-color: transparent; /* 文字设定为透明 */
}

文末的参考中，还介绍了使用 SVG 来实现描边的效果，代码比较多，但是比较灵活，如果是简单的描边，这里不推荐使用 SVG，用 text-stroke 就可以了。