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
（本篇完）
相关文章
- 如何用简单的Web方法实现图片的马赛克效果 (0.644)
- -webkit-text-stroke文字描边CSS属性及展开 (0.356)
- CSS paint-order祝大家元旦快乐 (0.356)
- 更符合书写习惯的CSS媒体查询Range语法 (0.247)
- 借助SVG滤镜实现CSS无法实现的阴影和模糊效果 (0.150)
- SVG滤镜系列之搞懂<feBlend>元素 (0.150)
- 记一次技术交流，feMerge滤镜复制任意DOM元素样式 (0.150)
- 趁热打铁，SVG feColorMatrix滤镜gogogo! (0.150)
- 搞懂SVG中各种Light相关的光源滤镜 (0.123)
- 单IMG标签的图片内阴影效果实现 (0.123)
- 纯CSS图片滤镜项目CSSgram简介 (RANDOM - 0.027)