by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11182 鑫空间-鑫生活
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、没想到吧，还是SVG滤镜

今天继续SVG滤镜的学习，不过直接从实用的案例出手。

先看效果。

您可以狠狠地点击这里：使用feMorphology滤镜改变文字的粗细胖瘦demo

在我的1倍屏显示器下的效果如下所示：

尤其是其中的变细效果，在Web中是比较难实现的。

文字变粗，除了可以使用font-weight属性设置加粗，还可以使用text-shadow投影属性模拟。

但是对于变细，据我所知，只能使用CSS描边属性近似模拟，在“-webkit-text-stroke文字描边CSS属性及展开”一文中对此技术有相关介绍。

不过使用-webkit-text-stroke让文字变细，需要背景色是纯色，使用场景有限。

但是这里即将要介绍的SVG方法，则不会有此问题，可谓是最佳的文字变细的技术实现。

二、文字变细是如何实现的？

使用的是SVG的feMorphology滤镜。

具体代码如下所示，首先在页面中插入一个仅包含SVG滤镜定义的<svg>元素，如下所示：

<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>

然后，我们就可以按照正常的CSS和HTML代码进行处理了，相关代码如下所示：

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

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

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

还是相当简单的。

三、feMorphology滤镜语法和作用

SVG feMorphology的作用是对输入的图形或者图形进行侵蚀或扩张，可以实现类似增肥或减薄效果。

支持3个属性值，分别如下：

in

输入的图像。支持内置的关键字，如SourceGraphic，就表示应用滤镜的元素，也可以是其他滤镜的运行结果（result属性的值）。

operator

指当前滤镜使用的算法。支持erode和dilate两个值，其中，erode是侵蚀的意思，可以让文字变瘦，dilate是扩张的意思，可以让文字加粗。

radius

表示侵蚀或扩张的尺寸大小。

还是非常简单的SVG滤镜。

在图像资源上的应用

图片元素往往像素点色彩丰富，在应用扩张或侵蚀效果后，会有些奇妙的变化。

例如下面这个例子，有一个原始图像，是这样的：

在应用erode和dilate效果后分别如下所示（实时渲染效果）：

可以看到，应用erode侵蚀效果的图像更加阴暗，画面略显恐怖，无法直视。

而应用dilate扩张效果的图像更加明亮，画面略显朦胧，如若梦境。

最最关键的是——图片显示的尺寸也变了。

从视觉表现上看，erode的图片尺寸更小，dilate图片尺寸更大，扩展的尺寸就是设置的radius属性值。

大家遇到类似效果的特效的时候，可以试着用用。

四、噢啦，结束了

OK，本文内容就说这么多吧。

哎呀，幸好今天上午没有去钓鱼，不然这篇文章不知道何年马月才能产出。

我关于HTML的新书最后一版review已经反馈了，差不多快要上架了。

不过现在的纸质书不好卖啊，我估计能有个两三千册就不错了。

《CSS世界》三部曲，我打算过段时间开始弄个视频精讲系列，讲讲书籍内容，顺便聊聊其他的东西。

B站、微信视频，我还要再注册个抖音账号，更新下。

主力平台还是B站吧，对了，还有掘金，也可以。

最后，预告下，下篇文章将无JavaScript的图片马赛克技术。

尽请期待。

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11182

（本篇完）