使用feMorphology滤镜改变文字的粗细胖瘦实例页面

CSS代码：

data {
  font-size: 2.5rem;
  font-family: system-ui;
}
.erode {
  filter: url(#erode);
}

.dilate {
  filter: url(#dilate);
}

HTML代码：

<h4>正常</h4>
<data class="normal">《CSS新世界》</data>
<h4>苗条</h4>
<data class="erode">《CSS新世界》</data>
<h4>体胖</h4>
<data class="dilate">《CSS新世界》</data>

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <filter id="erode">
    <feMorphology operator="erode" radius="1" />
  </filter>
  <filter id="dilate">
    <feMorphology operator="dilate" radius="1" />
  </filter>
</svg>