带有CSS的字体上的圆角边缘

Question

是否可以使用CSS将字体转换为具有圆角的边缘？

我说的是与此smooth edges in Photoshop类似的效果>

到目前为止，我尝试使用SVG过滤器，但似乎有点复杂。

还有更好的方法吗？

使用的SVG过滤器的代码是这样：

<svg viewbox="0 0 100% 100%">
  <defs>
    <filter id="smooth">
      <feMorphology operator="dilate" radius="0" />
      <feGaussianBlur stdDeviation="3" />
      <feComponentTransfer>
        <feFuncA type="table" tableValues="0 0  1 1"></feFuncA>
      </feComponentTransfer>
      <feComponentTransfer>
        <feFuncA type="table" tableValues="0 0  1 1"></feFuncA>
      </feComponentTransfer>
      <feComponentTransfer out="rounded1">
        <feFuncA type="table" tableValues="0 0  1 1"></feFuncA>
      </feComponentTransfer>
      <feComposite in2="rounded1" in="SourceGraphics" operator="in"/>
    </filter>
  </defs>
</svg>
及其解释在这里：https://dev.to/codingdudecom/css-smooth-font-edges-3pbb

是否可以使用CSS将字体转换为具有圆角的边缘？我说的是类似于Photoshop中这种平滑边缘的效果到目前为止，我尝试使用SVG滤镜，但似乎有点...

Answer 1

一种可能的解决方案是像这样使用goo过滤器。作为观察，您需要知道对于其他字体和不同字体大小，可能需要更改feColorMatrix