如何使用CSS实现字体脏污/纹理效果 模拟预览中的深色斑点质感

我想使用Flesh and Blood展示字体，该字体本身和常规字体一样仅为纯黑色，请问能否通过CSS模拟出预览图中字体带有的深色斑点纹理效果，字体外的白色斑点可以忽略不计。

完全可以实现该效果，核心思路是给文字叠加不规则半透明深色纹理，再通过CSS特性限制纹理仅在文字区域生效，以下是两种生产环境常用的实现方案：

方案1：背景剪切方案（兼容性最佳） #

通过background-clip: text属性将背景纹理限制在文字区域显示，可选择引入外部纹理图或者纯CSS生成动态纹理，不需要额外依赖其他资源。

纯CSS动态纹理实现代码 #

@font-face {
  font-family: 'Flesh and Blood';
  src: url('替换为你的字体文件路径.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

.text-with-texture {
  font-family: 'Flesh and Blood', sans-serif;
  font-size: 72px;
  color: #000;
  position: relative;
}

/* 叠加斑点纹理层 */
.text-with-texture::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  background-image: linear-gradient(45deg, rgba(0,0,0,0.3) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.3) 75%), 
                    linear-gradient(45deg, rgba(0,0,0,0.3) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.3) 75%);
  background-size: 2px 2px;
  background-position: 0 0, 1px 1px;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* 调整该值控制纹理深浅 */
  opacity: 0.4;
}

HTML使用示例：

<div class="text-with-texture" data-text="示例文本内容"></div>

方案2：SVG滤镜方案（效果更自然） #

如果需要更接近真实印刷的不规则斑点效果，可以使用自定义SVG噪点滤镜，直接作用于文字元素，无需修改文字本身的样式属性：

实现代码 #

首先在HTML中插入SVG滤镜定义：

<svg width="0" height="0" style="position: absolute; visibility: hidden;">
  <filter id="darkSpotNoise">
    <feTurbulence type="fractalNoise" baseFrequency="0.7" numOctaves="3" stitchTiles="stitch"/>
    <feColorMatrix type="matrix" values="1 0 0 0 0
                                          0 1 0 0 0
                                          0 0 1 0 0
                                          0 0 0 0.6 -0.35"/>
    <feComposite in="SourceGraphic" operator="in"/>
  </filter>
</svg>

对应的CSS代码：

.text-with-texture {
  font-family: 'Flesh and Blood', sans-serif;
  font-size: 72px;
  color: #000;
  /* 应用定义好的SVG滤镜 */
  filter: url(#darkSpotNoise);
}

可通过调整feTurbulence的baseFrequency属性控制斑点大小，数值越大斑点越密集；调整feColorMatrix最后一行的两个数值控制纹理的透明度和深浅。

注意事项 #

• 两种方案都兼容所有主流现代浏览器，background-clip: text需要添加-webkit-前缀兼容旧版Safari
• 纹理参数需要根据实际使用的字号调整，大字号可适当提高斑点密度，小字号建议降低密度避免文字发虚
• 如果需要兼容IE11及更低版本浏览器，优先使用背景剪切方案，SVG滤镜在旧版IE下兼容性较差

内容的提问来源于stack exchange，提问作者sirzento