Css 字体效果 dirty/textured

Question

我想使用字体 from here。如您所见，顶部有一个预览图像，下面有一个小区域，您可以在其中编写示例文本。

该字体与其他所有字体一样，只有黑色。 css 是否可以模仿预览图像中使用的纹理？我的意思是黑点。不在字体上的白点可以忽略

Answer 1

这是一个使用 CSS background-clip 对其元素的背景进行文本剪辑的简单示例（请注意，这不是完全标准的，某些浏览器需要前缀并且与 IE 不兼容）：

.fontBg {
  background-image: url(https://picsum.photos/id/1016/300/100);
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 60px;
  font-weight: 900;
  font-family: sans-serif;
}

<div class="fontBg">HERE IS SOME TEXT</div>

Css 字体效果 dirty/textured

Css effect to make font look dirty/textured

css

fonts