网络日志

今҈天҈真҈是҈热҈化҈了҈!

欢迎关注我的公众号:前端侦探

今天真是太热了,不信你看标题

今҈天҈真҈是҈热҈化҈了҈!

也可以查看下面截图

相信大家最近都能看到这样“热化了”的标题。那么,这是如何实现的呢?CSS 可以实现类似的效果吗?一起看看吧

一、菊花字符 488

首先,这类字符效果实现很简单,本质就是插入了一个特殊的“花漾字符”,可以在控制台上看到它的真实外貌

这里长的像菊花一样的字符非常特殊,正常情况下是打不出来的,只能通过复制或者一些特殊的输入法输入。我们还可以将这个字符串分离开来,如下

通过转换,这里借助了张鑫旭的在线转换工具,可以看到Unicode值是488

所以,在 HTML 中,还可以通过转义字符҈来手动输入

<h2>今&#x488;天&#x488;真&#x488;是&#x488;热&#x488;化&#x488;了&#x488;~</h2>

同样可以得到相同的效果

二、通过伪元素生成

如果希望页面展示的是“热化了”样式,但是复制出来的是正常的文字,该如何处理呢?

首先,需要将文字拆分开来,用标签包裹,如下

[...'今天真是热化了'].map(el => `<span>${el}</span>`).join('')

结果如下

<h2><span>今</span><span>天</span><span>真</span><span>是</span><span>热</span><span>化</span><span>了</span></h2>

然后,通过伪元素在每个标签后面添加一个菊花字符\488

span::after{
  content:'\488'
}

看,效果出来了

这样下来,页面中就不会有特殊字符了,对搜索引擎也更为友好

三、通过文本装饰生成

上面通过伪元素的方式几乎和原有实现方式一样,但是需要将每个字符都包裹一层标签,略微繁琐。有没有办法不拆分呢?也是可以模拟实现的,那就是借助文本装饰属性:text-emphasis

有兴趣的可以参考张鑫旭的这篇文章:使用CSS text-emphasis对文字进行强调装饰

假设 HTML 是这样的

<p>今天真是热化了~</p>

然后设置装饰属性,文案就是刚才那个菊花字符\488

p{
  text-emphasis: '\488';
}

效果如下

现在有两个问题来了

  1. 如何改变菊花字符的大小?
  2. 如何让这个菊花字符叠加在标题上?

text-emphasis的大小是跟原文本字体和大小有关的,在中文字符下,大概是文本的 1/2 左右,所以为了不影响原标题大小,这里可以用伪元素生成一份相同的文案,具体做法是

<p title="今天真是热化了~">今天真是热化了~</p>

然后用伪元素动态生成属性,文本装饰也放在伪元素上,并且设置绝对定位

p::before{
  position: absolute;
  content: attr(title);
  text-emphasis: '\488';
}

为了区分,伪元素给了特殊的颜色

然后,将伪元素字号放大为原来的 2 倍

p::before{
  position: absolute;
  content: attr(title);
  text-emphasis: '\488';
  font-size: 200%;
}

现在文字由于太大换行了,没关系,可以缩小字符间距,用letter-spacing实现

p::before{
  position: absolute;
  content: attr(title);
  text-emphasis: '\488';
  font-size: 200%;
  letter-spacing: -.5em;
}

下面把伪元素生成的标题隐藏起来,可以设置文本颜色为透明。默认情况下,装饰颜色是跟随文字颜色,所以可能还需要额外设置

p::before{
  text-emphasis: '\488' #000;
  color: transparent;
}

在这里,我更推荐用颜色填充的方式实现

p::before{
    -webkit-text-fill-color: transparent;
}

效果如下

这样的好处是可以保持原有颜色的继承性,比如在外层改个颜色

以上完整代码可以访问在线 demo:CSS hot-word(runjs.work)

RunJS,前端代码在线创作与分享。

四、总结一下

以上就是全部内容了,主要介绍了一种特殊的字符,以及在 HTML 中的应用,然后通过 CSS 的方式模拟实现了类似的效果,下面总结一下实现要点

  1. 热化了的文字本质上是插入了一个特殊字符
  2. 这个特殊字符的 Unicode 值是 488
  3. 可以通过伪元素将这个特殊字符插入到 HTML 中,不过需要将每个字符用标签包裹
  4. 还可以通过文本装饰属性text-emphasis生成特殊字符
  5. 文本装饰的颜色默认继承自文字颜色

当然,文本装饰在这里并不是一个很完美的方法,不能换行,对英文支持也有问题,对特定内容建议采用第一种伪元素生成的方法。最后,如果觉得还不错,对你有帮助的话,欢迎点赞、收藏、转发❤❤❤

欢迎关注我的公众号:前端侦探