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