Rounded edges on fonts with CSS

user_2587784 0
Viewed 2192

Is it possible to transform a font with CSS to have rounded edges?

I'm talking about an effect similar to this smooth edges in Photoshop

enter image description here

So far I tried using a SVG filter, but it seems a bit complicated.

Is there a better way?

The code for the SVG filter used is this:

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

and the explanations are here: https://dev.to/codingdudecom/css-smooth-font-edges-3pbb

smoothing fonts svg css html
1 Answers

One possible solution is using a goo filter like so. As an observation you need to know that for a different font and a different font-size you may need to change the values of the feColorMatrix and 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>

Please read about The Goeey Effect

user_78973950
Related