CSS 渐变字体实现

by Jack Pu

最近同事实现了 CSS 渐变的边框，于是乎自己想了下如何实现这个渐变字体。如果你有 SVG 经验的话，可能会非常快速的找到方法；当然如果你知道 canvas 肯定也是一个比较费力的解决方案，我们这里主要说下纯 CSS 的解决方案.

这里需要利用几个属性：

  • background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面
  • -webkit-text-fill-color 指定了文本字符的填充颜色。若未设置此属性，则使用 color 属性的值。

我们通过填充渐变背景，并且将于背景延伸到字体内容即可。

span {
  font-size: 72px;
  font-family: arial;
  background: linear-gradient(90deg, #12c2e9, #c471ed, #f64f59);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

改变渐变方向

.flare {
  font-size: 72px;
  background: linear-gradient(#f12711, #f5af19);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Source Code Pro', monospace;
}

CodePen Demo: https://codepen.io/Jack_Pu/pen/abPQwqQ

关于 SVG 的方案可以参考 https://codepen.io/brenna/pen/mybQVx