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

这篇文章发布于 2024年05月12日,星期日,22:16,归类于 SVG相关。 阅读 2122 次, 今日 84 次 4 条评论

 

封面图 火箭发射

一、没想到吧,还是SVG滤镜

今天继续SVG滤镜的学习,不过直接从实用的案例出手。

先看效果。

您可以狠狠地点击这里:使用feMorphology滤镜改变文字的粗细胖瘦demo

在我的1倍屏显示器下的效果如下所示:
文字加粗和变细效果

尤其是其中的变细效果,在Web中是比较难实现的。

文字变粗,除了可以使用font-weight属性设置加粗,还可以使用text-shadow投影属性模拟。

但是对于变细,据我所知,只能使用CSS描边属性近似模拟,在“-webkit-text-stroke文字描边CSS属性及展开”一文中对此技术有相关介绍。

不过使用-webkit-text-stroke让文字变细,需要背景色是纯色,使用场景有限。

但是这里即将要介绍的SVG方法,则不会有此问题,可谓是最佳的文字变细的技术实现。

二、文字变细是如何实现的?

使用的是SVG的feMorphology滤镜。

具体代码如下所示,首先在页面中插入一个仅包含SVG滤镜定义的<svg>元素,如下所示:

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <filter id="erode">
    <feMorphology operator="erode" radius="1" />
  </filter>
  <filter id="dilate">
    <feMorphology operator="dilate" radius="1" />
  </filter>
</svg>

然后,我们就可以按照正常的CSS和HTML代码进行处理了,相关代码如下所示:

data {
  font-size: 2.5rem;
}
.erode {
  filter: url(#erode);
}

.dilate {
  filter: url(#dilate);
}
<h4>苗条</h4>
<data class="erode">《CSS新世界》</data>
<h4>体胖</h4>
<data class="dilate">《CSS新世界》</data>

还是相当简单的。

三、feMorphology滤镜语法和作用

SVG feMorphology的作用是对输入的图形或者图形进行侵蚀或扩张,可以实现类似增肥或减薄效果。

支持3个属性值,分别如下:

in
输入的图像。支持内置的关键字,如SourceGraphic,就表示应用滤镜的元素,也可以是其他滤镜的运行结果(result属性的值)。
operator
指当前滤镜使用的算法。支持erode和dilate两个值,其中,erode是侵蚀的意思,可以让文字变瘦,dilate是扩张的意思,可以让文字加粗。
radius
表示侵蚀或扩张的尺寸大小。

还是非常简单的SVG滤镜。

在图像资源上的应用

图片元素往往像素点色彩丰富,在应用扩张或侵蚀效果后,会有些奇妙的变化。

例如下面这个例子,有一个原始图像,是这样的:

示意图

在应用erode和dilate效果后分别如下所示(实时渲染效果):

示意图
示意图

可以看到,应用erode侵蚀效果的图像更加阴暗,画面略显恐怖,无法直视。

而应用dilate扩张效果的图像更加明亮,画面略显朦胧,如若梦境。

最最关键的是——图片显示的尺寸也变了。

从视觉表现上看,erode的图片尺寸更小,dilate图片尺寸更大,扩展的尺寸就是设置的radius属性值。

大家遇到类似效果的特效的时候,可以试着用用。

四、噢啦,结束了

OK,本文内容就说这么多吧。

哎呀,幸好今天上午没有去钓鱼,不然这篇文章不知道何年马月才能产出。

我关于HTML的新书最后一版review已经反馈了,差不多快要上架了。

不过现在的纸质书不好卖啊,我估计能有个两三千册就不错了。

《CSS世界》三部曲,我打算过段时间开始弄个视频精讲系列,讲讲书籍内容,顺便聊聊其他的东西。

B站、微信视频,我还要再注册个抖音账号,更新下。

主力平台还是B站吧,对了,还有掘金,也可以。

最后,预告下,下篇文章将无JavaScript的图片马赛克技术。

尽请期待。

噢耶

(本篇完)

分享到:


发表评论(目前4 条评论)

  1. 湘礼说道:

    老师好,不知道可不可以打听一下,有没有办法在不修改复杂网页原节点内容,渲染存储的选中文字笔记标注,因为选中位置是基于网页原文的 这样就不会有把选中数据存入数据库后,在页面再次渲染回来后 出现节点变化的问题。主要是如果我在通过修改了节点内容后再次给后面的内容添加标注的话,就会导致获取到的文字选中位置和原文没有过标注的情况下位置是不一样的。这样的问题会导致如果我前面的标注删除后 后面的标注定位就会出问题。所以我想了解下有没有在办法在不影响原文的情况下 我存储选中文字位置渲染时 也能不影响原文,这样我后面的内容中添加的标注渲染就不会有影响了。但不知道有没有办法能实现。

  2. Woody说道:

    有办法实现半粗的效果吗。

  3. 柴桑文远说道:

    久违的张含韵

  4. liuliu说道:

    看得出来旭哥独爱张含韵