文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

离谱的需求:实现文字二次加粗再加边框

2024-12-02 18:39

关注

本文将通过一个实际的业务需求,讲解如何实现

极端场景下文字加粗加边框效果

文字多重边框的效果

需求背景 - 文字的二次加粗

今天遇到这样一个有意思的问题:

在文字展示的时候,利用了 font-weight: bold 给文字进行加粗,但是觉得还是不够粗,有什么办法能够让文字更粗一点呢?

emm,不考虑兼容性的话,答案是可以利用文字的 -webkit-text-stroke 属性,给文字二次加粗。

[MDN - webkit-text-stroke]( "MDN - webkit-text-stroke"):该属性为文本字符添加了一个边框(笔锋),指定了边框的宽和颜色, 它是 -webkit-text-stroke-width 和 -webkit-text-stroke-color 属性的缩写。

看下面的 DEMO,我们可以利用 -webkit-text-stroke,给文字二次加粗:

  1. 文字加粗CSS

     
  2. 文字加粗CSS

     
  3. 文字加粗CSS

     
  4. 文字加粗CSS

     
  1. p { 
  2.     font-size: 48px; 
  3.     letter-spacing: 6px;    
  4. p:nth-child(2) { 
  5.     font-weight: bold; 
  6. p:nth-child(3) { 
  7.     -webkit-text-stroke: 3px red; 
  8. p:nth-child(4) { 
  9.     -webkit-text-stroke: 3px #000; 

 对比一下下面 4 种文字,最后一种利用了 font-weight: bold 和 -webkit-text-stroke,让文字变得更为粗。

CodePen Demo -- font-weight: bold 和 -webkit-text-stroke 二次加粗文字[1]

如何给二次加粗的文字再添加边框?

OK,完成了上述第一步,事情还没完,更可怕的问题来了。

现在文字要在二次加粗的情况下,再添加一个不同颜色的边框。

我们把原本可能可以给文字添加边框的 -webkit-text-stroke 属性用掉了,这下事情变得有点棘手了。这个问题也可以转变为,如何给文字添加 2 层不同颜色的边框?

这还不简单,设计师,图来。

当然,这也难不倒强大的 CSS(SVG),让我们来尝试下。

尝试方法一:使用文字的伪元素放大文字

第一种尝试方法,有点麻烦。我们可以对每一个文字进行精细化处理,利用文字的伪元素稍微放大一点文字,将原文字和访达后的文字贴合在一起。

将文字拆分成一个一个独立元素处理

利用伪元素的 attr() 特性,利用元素的伪元素实现同样的字

放大伪元素的字

叠加在原文字之下

上代码:

    •  
    •     "文">文
    •  
    •     "字">字
    •  
    •     "加">加
    •  
    •     "粗">粗
    •  
    •     "C">C
    •  
    •     "S">S
    •  
    •     "S">S
    •  
     
  1. ul { 
  2.     display: flex; 
  3.     flex-wrap: nowrap; 
  4.  
  5. li { 
  6.     position: relative
  7.     font-size: 64px; 
  8.     letter-spacing: 6px; 
  9.     font-weight: bold; 
  10.     -webkit-text-stroke: 3px #000; 
  11.      
  12.     &::before { 
  13.         content: attr(data-text); 
  14.         position: absolute
  15.         top: 0; 
  16.         left: 0; 
  17.         bottom: 0; 
  18.         right: 0; 
  19.         color: red; 
  20.         -webkit-text-stroke: 3px #f00; 
  21.         z-index: -1; 
  22.         transform: scale(1.15); 
  23.     } 

 可以简单给上述效果加个动画,一看就懂:

CodePen Demo -- 利用伪元素给加粗文字添加边框[2]

看着不错,但是实际上仔细观察,边框效果很粗糙,文字每一处并非规则的被覆盖,效果不太能接受:

尝试方法二:利用 text-shadow 模拟边框

第一种方法宣告失败,我们继续尝试第二种方式,利用 text-shadow 模拟边框。

我们可以给二次加粗的文字添加一个文字阴影:

  1. 文字加粗CSS

     
  1. p { 
  2.     font-size: 48px; 
  3.     letter-spacing: 6px; 
  4.     font-weight: bold; 
  5.     -webkit-text-stroke: 1px #000; 
  6.     text-shadow: 0 0 2px red; 

 看看效果:

好吧,这和边框差的也太远了,它就是阴影。

不过别着急,text-shadow 是支持多重阴影的,我们把上述的 text-shadow 多叠加几次:

  1. p { 
  2.     font-size: 48px; 
  3.     letter-spacing: 6px; 
  4.     font-weight: bold; 
  5.     -webkit-text-stroke: 1px #000; 
  6.   - text-shadow: 0 0 2px red; 
  7.   + text-shadow: 0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red,0 0 2px red; 

Wow,不仔细看的话,利用这种叠加多层 text-shadow 的方式,还真的非常像边框!

当然,如果我们放大来看,瑕疵就比较明显了,还是能看出是阴影:

CodePen Demo -- 利用 text-shadow 给文字添加边框[3]

我们没有办法了吗?不,还有终极杀手锏 SVG。

尝试方法三:利用 SVG feMorphology 滤镜给文字添加边框

其实利用 SVG 的 feMorphology 滤镜,可以非常完美的实现这个需求。

这个技巧,我在 有意思!不规则边框的生成方案[4] 这篇文章中也有提及。

借用 feMorphology 的扩张能力给不规则图形添加边框。

直接上代码:

  1. 文字加粗CSS

     
  2.  
  3. "0" height="0"
  4.     "dilate"
  5.         in="SourceAlpha" result="DILATED" operator="dilate" radius="2"
  6.         "red" flood-opacity="1" result="flood"
  7.         in="flood" in2="DILATED" operator="in" result="OUTLINE"
  8.  
  9.          
  10.             in="OUTLINE" /> 
  11.             in="SourceGraphic" /> 
  12.          
  13.      
  14.  
  1. p { 
  2.     font-size: 64px; 
  3.     letter-spacing: 6px; 
  4.     font-weight: bold; 
  5.     -webkit-text-stroke: 2px #000; 
  6.     filter: url(#dilate); 

效果如下:

我们可以通过 SVG feMorphology 滤镜中的 radius 控制边框大小,feFlood 滤镜中的 flood-color 控制边框颜色。并且,这里的 SVG 代码可以任意放置,只需要在 CSS 中利用 filter 引入即可。

本文不对 SVG 滤镜做过多的讲解,对 SVG 滤镜原理感兴趣的,可以翻看我上述提到的文章。

至此,我们就完美的实现了在已经利用 font-weight: bold 和 -webkit-text-stroke 的基础上,再给文字添加不一样颜色的边框的需求。

放大了看,这种方式生成的边框,是真边框,不带任何的模糊:

CodePen Demo -- 利用 SVG feMorphology 滤镜给文字添加边框[5]

参考资料

[1]CodePen Demo -- font-weight: bold 和 -webkit-text-stroke 二次加粗文字:

https://codepen.io/Chokcoco/pen/gOxwEvo

[2]CodePen Demo -- 利用伪元素给加粗文字添加边框:

https://codepen.io/Chokcoco/pen/ExvgLNm

[3]CodePen Demo -- 利用 text-shadow 给文字添加边框:

https://codepen.io/Chokcoco/pen/porEVeg

[4]有意思!不规则边框的生成方案:

https://github.com/chokcoco/iCSS/issues/106

[5]CodePen Demo -- 利用 SVG feMorphology 滤镜给文字添加边框:

https://codepen.io/Chokcoco/pen/GRvjdMz

 

来源:iCSS前端趣闻内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯