CSS 巧妙实现文字二次加粗再加边框
本文将通过一个实际的业务需求,讲解如何实现
- 极端场景下文字加粗加边框效果
- 文字多重边框的效果
需求背景 - 文字的二次加粗
今天遇到这样一个有意思的问题:
- 在文字展示的时候,利用了
font-weight: bold
给文字进行加粗,但是觉得还是不够粗,有什么办法能够让文字更粗一点呢?
emm,不考虑兼容性的话,答案是可以利用文字的 -webkit-text-stroke
属性,给文字二次加粗。
[MDN - webkit-text-stroke](): 该属性为文本字符添加了一个边框(笔锋),指定了边框的宽和颜色, 它是 -webkit-text-stroke-width
和 -webkit-text-stroke-color
属性的缩写。
看下面的 DEMO,我们可以利用 -webkit-text-stroke
,给文字二次加粗:
<p>文字加粗CSS</p>
<p>文字加粗CSS</p>
<p>文字加粗CSS</p>
<p>文字加粗CSS</p>
p {font-size: 48px;letter-spacing: 6px;
}
p:nth-child(2) {font-weight: bold;
}
p:nth-child(3) {-webkit-text-stroke: 3px red;
}
p:nth-child(4) {-webkit-text-stroke: 3px #000;
}
如何给二次加粗的文字再添加边框?
OK,完成了上述第一步,事情还没完,更可怕的问题来了。
现在文字要在二次加粗的情况下,再添加一个不同颜色的边框。
我们把原本可能可以给文字添加边框的 -webkit-text-stroke
属性用掉了,这下事情变得有点棘手了。这个问题也可以转变为,如何给文字添加 2 层不同颜色的边框?
当然,这也难不倒强大的 CSS(SVG),让我们来尝试下。
尝试方法一:使用文字的伪元素放大文字
第一种尝试方法,有点麻烦。我们可以对每一个文字进行精细化处理,利用文字的伪元素稍微放大一点文字,将原文字和访达后的文字贴合在一起。
- 将文字拆分成一个一个独立元素处理
- 利用伪元素的
attr()
特性,利用元素的伪元素实现同样的字 - 放大伪元素的字
- 叠加在原文字之下
上代码:
<ul><li data-text="文">文</li><li data-text="字">字</li><li data-text="加">加</li><li data-text="粗">粗</li><li data-text="C">C</li><li data-text="S">S</li><li data-text="S">S</li>
</ul>
ul {display: flex;flex-wrap: nowrap;
}li {position: relative;font-size: 64px;letter-spacing: 6px;font-weight: bold;-webkit-text-stroke: 3px #000;&::before {content: attr(data-text);position: absolute;top: 0;left: 0;bottom: 0;right: 0;color: red;-webkit-text-stroke: 3px #f00;z-index: -1;transform: scale(1.15);}
}
可以简单给上述效果加个动画
看着不错,但是实际上仔细观察,边框效果很粗糙,文字每一处并非规则的被覆盖,效果不太能接受。
尝试方法二:利用 text-shadow 模拟边框
第一种方法宣告失败,我们继续尝试第二种方式,利用 text-shadow
模拟边框。
我们可以给二次加粗的文字添加一个文字阴影:
<p>文字加粗CSS</p>
p {font-size: 48px;letter-spacing: 6px;font-weight: bold;-webkit-text-stroke: 1px #000;text-shadow: 0 0 2px red;
}
好吧,这和边框差的也太远了,它就是阴影。
不过别着急,text-shadow
是支持多重阴影的,我们把上述的 text-shadow
多叠加几次:
p {font-size: 48px;letter-spacing: 6px;font-weight: bold;-webkit-text-stroke: 1px #000;- text-shadow: 0 0 2px red;+ 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
的方式,还真的非常像边框!
当然,如果我们放大来看,瑕疵就比较明显了,还是能看出是阴影。
尝试方法三:利用多重 drop-shadow()
在尝试了 text-shadow
之后,自然而然的就会想到多重 filter: drop-shadow()
,主观上认为会和多重 text-shadow
的效果应该是一致的。
不过,实践出真知。
在实际测试中,发现利用 filter: drop-shadow()
的效果比多重 text-shadow
要好,模糊感会弱一些:
p {font-weight: bold;-webkit-text-stroke: 1px #000;filter: drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red) drop-shadow(0 0 0.25px red);
}
我们甚至可以利用它制作文字二次加粗后的多重边框:
p {font-weight: bold;-webkit-text-stroke: 1px #000;filter: drop-shadow(0 0 0.2px red) // 重复 N 次drop-shadow(0 0 0.2px red)drop-shadow(0 0 0.25px blue) // 重复 N 次drop-shadow(0 0 0.25px blue);
}
然而,在不同屏幕下(高清屏和普通屏),drop-shadow()
的表现效果差别非常之大,实则也难堪重用。
我们没有办法了吗?不,还有终极杀手锏 SVG。
尝试方法四:利用 SVG feMorphology 滤镜给文字添加边框
其实利用 SVG 的 feMorphology 滤镜,可以非常完美的实现这个需求。
借用 feMorphology 的扩张能力给不规则图形添加边框。
直接上代码:
<p>文字加粗CSS</p><svg width="0" height="0"><filter id="dilate"><feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="2"></feMorphology><feFlood flood-color="red" flood-opacity="1" result="flood"></feFlood><feComposite in="flood" in2="DILATED" operator="in" result="OUTLINE"></feComposite><feMerge><feMergeNode in="OUTLINE" /><feMergeNode in="SourceGraphic" /></feMerge></filter>
</svg>
p {font-size: 64px;letter-spacing: 6px;font-weight: bold;-webkit-text-stroke: 2px #000;filter: url(#dilate);
}
我们可以通过 SVG feMorphology 滤镜中的 radius
控制边框大小,feFlood 滤镜中的 flood-color
控制边框颜色。并且,这里的 SVG 代码可以任意放置,只需要在 CSS 中利用 filter 引入即可。
如果你想开发小程序或者APP软件的话,可以通过专业开发公司,来帮助你实现开发需求:厦门在乎科技-专注厦门小程序开发、APP开发、网站开发、h5小游戏开发
CSS 巧妙实现文字二次加粗再加边框相关推荐
- ggplot2箱线图的美化之路: 箱线图到直方图加散点图再加误差线的美化之路
如何把你的箱线图变成plus版? 箱线图到直方图加散点图再加误差线的美化之路 前言 数据准备 箱线图美化 01 一个平平无奇的箱线图 02 给箱线图加上误差线 03 加上散点的信息 04 去除网格线和 ...
- h5点击后字体加粗出现下边框_人力资源管理论文格式(字体+版式+打印)
作者:新风学术网 一.纸型.页面设置.版式和用字 1.论文一律用标准A4型纸(297mmX210mm)打印. 2.页面分图文区与白边区两部分,所有的文字.图形.其他符号只能出现在图文区内.白边区的尺寸 ...
- python线条加粗_python 加粗
广告关闭 腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! 背景知识:docx文件的结构分为三层,1.docment对象表示整个文档: 2. ...
- python加粗_python 加粗
Centos下安装Python3.5 (本文章,凡是centos命令,我用斜杠加粗表示,以便各位阅读~) 一般情况下,centos系统是自带python的,但是默认的python版本比较老,是2.6. ...
- LaTex 加粗(加黑)的方式
1. 基本 LaTeX技巧458:关于LaTeX数学字体加粗 $\mathbf $,会变为粗体,但也导致数学字母斜体形式的丢失: 使用 amsmath package 的 \boldmath 命令: ...
- latex如何设置字体并加粗_Latex设置字体大小,加粗,加下划线,变斜体_孩纸气_新浪博客...
Latex 设置字体大小命令由小到大依次为: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE \huge ...
- html table边框加粗,table加边框记录
table加边框记录 Html中table的属性: border= "1":给整个表格(包括表格及每一个单元格)加上1像素的黑色边框, 其等同于css中的: table,table ...
- 产生粗体字的html标签,html字体加粗用css设置文字粗体样式
html如何加粗文字,HTML加粗标签元素有哪些?CSS字体加粗又怎么来实现?粗体代码是什么? 综合以上问题,可以使用CSS样式和HTML标签两种方法来实现,在实际布局时候根据需要来选择文字字体加粗方 ...
- html语言 加粗,html字体加粗用css设置文字粗体样式
HTML加粗标签元素有哪些?CSS字体加粗又怎么来实现?粗体代码是什么? 综合以上问题,可以使用CSS样式和HTML标签两种方法来实现,在实际布局时候根据需要来选择文字字体加粗方法途径. 一.html ...
- css div里引用em字体会变斜体_CSS文字加粗斜体[解决代码]
CSS如何给文字加粗,这是小白常见的问题,今天俺跟大家总结分享. 标签解决办法 一般老的浏览器可能会使用类似或来加粗文字用来设置斜体,例如以下代码: 加粗字体 加粗字体 斜体 但是此办法语义化不是很好 ...
最新文章
- centos 安装 aria2 webui 实现网页下载
- 激光雷达的地面-非地面分割和pcl_ros实践
- Shared——The best front-end hacking cheatsheets — all in one place.
- 替换IP java代码
- 用JavaFX编写图块引擎
- 一台电脑同时添加git和bitbucket两个网站的ssh key
- vue+django前后端项目部署
- 无心剑中译丁尼生《乞丐少女》
- OpenCV总结:实现马赛克和毛玻璃滤镜效果
- 植物学 —— 基本名词、术语及概念
- position绝对定位后,a中使用display:block 无效的解决办法
- ansys命令流——网格划分基础操作
- 一行.bat代码实现win+L锁定计算机立即锁屏
- Magento国家代码缩写
- linux 全文查找、替换命令
- java ascii 编码方式,Java 字符编码 ASCII、Unicode和UTF-8
- t480安装matlab不了,thinkpad t480和t490的区别
- WiFi-ESP8266入门http(3-1)网页认证上网-post请求(原教程)
- 关于修改虚拟机内存,和开启 硬件加速
- Linux Ext2文件系统