CSS Gradient Text with Stroke / CSS 渐变文字和描边的若干实现方式

基础实现

渐变文本在日常的页面里是比较常见的，尤其是一些活动页面。使用 css 实现渐变文字我们是这么写的：

.gradient {
  background-image: linear-gradient(90deg, #fe8739, #fe4912, #fd9649, #fd9649);
  color: transparent;
  -webkit-background-clip: text;
}

添加纯色描边则是这么写的：

.stroke {
  -webkit-text-stroke: 1px white;
}

但是当你的页面文字使用了不同的字体，或是出现了文本换行时，表现可能就会出问题了，比如使用了 font-family: system-ui; 的字体进行描边时，文字渲染是这样的：

不同实现方式

现在我们来探索下给纯色或渐变文本添加纯色描边的不同实现方式，通过看查看他们之间的渲染差异来帮助我们结合具体业务情况选择最为合适的实现方式。

下面以 font-family: system-ui; 字体为例，看看这三种场景下不同的实现方式有什么区别：

• 非斜体单行文本
• 斜体单行文本
• 非斜体换行文本

使用 -webkit-text-stroke

使用 text-shadow

一个 text-shadow 的描边无法完整包裹文字，尝试使用多个 text-shadow ：

使用伪类

使用 filter: drop-shadow()

使用 svg filter

为何不适用图片代替

既然代码处理起来看着这么”不靠谱“，我直接用图片不就行了？ 使用图片自然是比较简单粗暴的解法，但是碰到下述场景可能就不太适合选用图片了：

• 处于拮据的时候，毕竟图片存储和网络传输都要花钱
• 图片加载会有一定时间，比较影响页面表现
• 文案是动态改变的，比如一个国际化页面，不同国家会展示不同的语言。你忍心让设计师每次都提供所有国家的对应文案切图吗？！

总结

上述可以看到不同实现方式都能实现最终需求，但是之间的效果却不尽相同。若读者们有其他奇妙的实现方式，也欢迎交流哦。

Live Demo

该 Demo 内可以切换字体、是否渐变文字，当你切换到渐变文字后，会发现上述有些实现方式就不能用了。