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

Question

我正在寻找一种CSS字体，尽可能接近橡皮图章的效果。例如，这个图片中的字体：。我不想使用图片，因为文字是动态的。如果有人能提供如何做到这一点的建议，我将不胜感激。

更新：这个问题似乎是重复的。

- Richard

---

不完全相同但有点类似：http://www.1001fonts.com/top-secret-font.html - mrid

我能找到的最接近的是来自fonts.com的高级字体：https://www.fonts.com/font/itc/rubber-stamp - Joseph Marikle

请注意不要在QA网站上分享商业图片。相反，请提供链接。 - Anirudha

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>

- mrid