不使用font-weight等CSS实现文字变瘦或变胖效果
💡
原文中文，约2100字，阅读约需5分钟。
📝
内容提要
本文介绍了使用SVG滤镜中的feMorphology实现文字变细的方法，feMorphology滤镜可以对图形进行侵蚀或扩张，实现文字变瘦或加粗的效果。文章提供了相关代码和滤镜语法说明，并预告了下篇文章将介绍无JavaScript的图片马赛克技术。
🎯
关键要点
- 本文介绍了使用SVG滤镜中的feMorphology实现文字变细的方法。
- feMorphology滤镜可以对图形进行侵蚀或扩张，实现文字变瘦或加粗的效果。
- 使用SVG的feMorphology滤镜可以避免CSS描边属性的限制，提供更好的文字变细技术实现。
- 具体代码包括插入SVG滤镜定义和相应的CSS样式。
- feMorphology滤镜支持三个属性：in、operator和radius，分别用于输入图像、滤镜算法和侵蚀或扩张的尺寸。
- 应用erode和dilate效果后，图像的视觉表现和尺寸会发生变化。
- 文章最后预告了下篇文章将介绍无JavaScript的图片马赛克技术。
❓
延伸问答
如何使用SVG滤镜实现文字变细效果？
可以使用SVG的feMorphology滤镜，通过设置operator为'erode'来实现文字变细效果。
feMorphology滤镜的主要属性有哪些？
feMorphology滤镜支持三个属性：in（输入图像）、operator（算法，支持erode和dilate）、radius（侵蚀或扩张的尺寸）。
使用feMorphology滤镜的优势是什么？
使用feMorphology滤镜可以避免CSS描边属性的限制，提供更灵活的文字变细和加粗效果。
如何在代码中应用feMorphology滤镜？
在页面中插入SVG滤镜定义，并在CSS中使用filter属性引用相应的滤镜，如.erode和.dilate类。
文字变粗和变细的效果有什么不同？
变粗效果使用dilate，文字视觉上更大；变细效果使用erode，文字视觉上更小且阴暗。
下篇文章将介绍什么内容？
下篇文章将介绍无JavaScript的图片马赛克技术。
➡️
