不使用font-weight等CSS实现文字变瘦或变胖效果
内容提要
本文介绍了使用SVG滤镜中的feMorphology实现文字变细的方法，feMorphology滤镜可以对图形进行侵蚀或扩张，实现文字变瘦或加粗的效果。文章提供了相关代码和滤镜语法说明，并预告了下篇文章将介绍无JavaScript的图片马赛克技术。
延伸解读
为何文字变细是难点
在Web中，文字加粗可通过font-weight或text-shadow模拟，但变细一直缺乏直接方案。传统方法依赖-webkit-text-stroke描边，却要求背景为纯色，适用场景受限。本文介绍的SVG feMorphology滤镜通过侵蚀效果实现变细，不受背景色约束，为文字变细提供了更通用的技术路径。
feMorphology的语法与效果
feMorphology滤镜支持三个属性：in指定输入图像，operator选择erode（侵蚀）或dilate（扩张），radius控制作用尺寸。erode使文字变瘦，dilate使文字加粗。使用时需在页面中插入仅含滤镜定义的SVG元素，再通过CSS的filter属性引用，代码结构简单，易于集成。
在图像上的视觉变化
将feMorphology应用于图像时，erode侵蚀会使画面更阴暗、尺寸缩小，dilate扩张则让画面更明亮、尺寸扩大，扩展量等于radius值。这种效果可制造特殊视觉风格，但需注意尺寸变化可能影响布局，建议在需要特效时尝试。
Q&A
如何使用SVG滤镜实现文字变细效果？
可以使用SVG的feMorphology滤镜，通过设置operator为'erode'来实现文字变细效果。
feMorphology滤镜的主要属性有哪些？
feMorphology滤镜支持三个属性：in（输入图像）、operator（算法，支持erode和dilate）、radius（侵蚀或扩张的尺寸）。
使用feMorphology滤镜的优势是什么？
使用feMorphology滤镜可以避免CSS描边属性的限制，提供更灵活的文字变细和加粗效果。
如何在代码中应用feMorphology滤镜？
在页面中插入SVG滤镜定义，并在CSS中使用filter属性引用相应的滤镜，如.erode和.dilate类。
文字变粗和变细的效果有什么不同？
变粗效果使用dilate，文字视觉上更大；变细效果使用erode，文字视觉上更小且阴暗。
下篇文章将介绍什么内容？
下篇文章将介绍无JavaScript的图片马赛克技术。
