带有 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

Answer 1

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

div {
  height: 200px;
  padding:10px 60px;
  font-size:200px;
  font-family:Arial;
  filter:url(#goo);
}

svg{position:absolute;}

<svg width="0" height="0">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="7"  />
      <feColorMatrix  mode="matrix" values="1 0 0  0   0
                                  0 1 0  0   0
                                  0 0 1  0   0
                                  0 0 0 35  -7"  />
      <feBlend in="SourceGraphic"  />
    </filter>
  </defs>
</svg>
<div>
  <span>A B</span>
</div>

请阅读The Goeey Effect