不使用font-weight等CSS实现文字变瘦或变胖效果

💡 原文中文,约2100字,阅读约需5分钟。
📝

内容提要

本文介绍了使用SVG滤镜中的feMorphology实现文字变细的方法,feMorphology滤镜可以对图形进行侵蚀或扩张,实现文字变瘦或加粗的效果。文章提供了相关代码和滤镜语法说明,并预告了下篇文章将介绍无JavaScript的图片马赛克技术。

🎯

关键要点

  • 本文介绍了使用SVG滤镜中的feMorphology实现文字变细的方法。
  • feMorphology滤镜可以对图形进行侵蚀或扩张,实现文字变瘦或加粗的效果。
  • 使用SVG的feMorphology滤镜可以避免CSS描边属性的限制,提供更好的文字变细技术实现。
  • 具体代码包括插入SVG滤镜定义和相应的CSS样式。
  • feMorphology滤镜支持三个属性:in、operator和radius,分别用于输入图像、滤镜算法和侵蚀或扩张的尺寸。
  • 应用erode和dilate效果后,图像的视觉表现和尺寸会发生变化。
  • 文章最后预告了下篇文章将介绍无JavaScript的图片马赛克技术。
➡️

继续阅读