CSS 字体的圆边
Rounded edges on fonts with CSS
是否可以将 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
一种可能的解决方案是像这样使用 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>
是否可以将 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
一种可能的解决方案是像这样使用 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>