CSS 字体样式 - 橡皮图章效果

Question

我正在寻找一种尽可能接近橡皮图章的 CSS 字体。

例如类似的东西:

我不喜欢使用图片，因为文本是动态的。

任何人都可以就如何执行此操作提供一些建议，我将不胜感激。

更新

这个问题似乎与 this 重复

Answer 1

不是真正的字体，但它只会加载一个小图像一次，您可以多次使用它来生成类似的文本。

* {
  box-sizing: border-box;
}

h1 {
  position: relative;
  display: inline-block;
  color: red;
  padding: 15px;
  background-color: white;
  box-shadow:inset 0px 0px 0px 10px red;
}

h1:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("http://i.imgur.com/5O74VI6.jpg");
  mix-blend-mode: lighten;
}

<h1>
CANCELLED
</h1>