常见文字效果实现

avatar
Web前端 @CVTE_希沃

希沃ENOW大前端

公司官网:CVTE(广州视源股份)

团队:CVTE旗下未来教育希沃软件平台中心enow团队

本文作者:

前言

本人前端小白一枚,最近在做文本的艺术字效果,里面用到了很多css的属性来实现的文字效果,期间也遇到一些坑,借此机会做一次总结,希望对大家有所帮助。

文字效果

常见文字效果分以下6种,接下来分别给大家介绍一下如何实现:

  • 填充
  • 描边
  • 阴影
  • 发光
  • 透视
  • 倒影

1、填充效果

常见的填充效果有渐变填充和图片填充,效果如下图: image.png 以上填充效果可以通过 background-clip: text来实现,使用这个属性的意思是:以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉,即区块内的背景会被裁剪成文字的前景色。 为了达到文字填充效果,我们必须同时设置Color属性为透明,同时background-clip:text只在webkit内核浏览器才支持,因此需设置如下:

{
  -webkit-background-clip: text;
  color: transparent;
}

渐变填充效果背景图片(background-image)使用linear-gradient()函数,比如上图渐变填充css代码如下: image.png 图片填充效果背景图片也比较简单,不过如果要实现纹理效果,注意要同时设置background-repeat:repeat,比如上图的图片填充css代码如下: image.png 在Safari浏览器兼容性测试时,我们发现两个坑,在此特别提醒大家: 1、使用flex,child元素构造文本的方式,填充效果显示不正常: e58207e97bb2971ac06b241b494caa9a.jpg 2、不使用flex,child元素构造文本的方式,填充效果显示不正常:

4365d3acbae72fe8c465f95aea644536.jpg 最后验证发现不使用flex,inline Text的的方式,显示才正常: 177c6852e060a0e98ef485efd1aaaa56.jpg 所以在Safari浏览器下:使用backgroundClip:text属性时,元素不使用display:flex,元素内部inline文本

2、描边效果

我们常看到的文字描边效果如下: image.png 要实现文字描边效果,我们可以使用css提供的文字描边属性text-stroke, text-stroke属性的语法并不复杂,它仅仅是这两个CSS属性合体:text-stroke-widthtext-stroke-color,也就是描边的宽度和描边的颜色。 简单示意:

{
 -webkit-text-stroke: 2px red;
}

经过验证发现,text-stroke采用的是居中描边特性,这样的话会让真实文本的字重削弱了,因为会一半的描边宽度会盖住文本区域,为了不削弱文字的字重,我们想到了两个dom元素叠加的方法:第一个元素设置描边效果,第二个元素设置跟第一个元素一样的前景色,盖住底层元素的内描边。 例如上图的实现如下: image.png

3、阴影效果

阴影效果应该是最常见的文字效果了,比如下面的效果: image.png text-shadow可以为文字添加阴影。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。另外阴影效果还支持叠加,每隔叠加的阴影用逗号分隔,具体设置如下图: image.png image.png

4、发光效果

发光效果实际是一种特殊的阴影效果,如下图所示: image.png 要实现发光效果,只需text-shadow在X、Y方向的偏移量为0,发光颜色值就是阴影的颜色值,这样就可以看起来像在文字周围有发光效果。比如上图的发光样式设置如下: image.png

5、透视效果

我们通常看到的透视效果是这样的: image.png 通过上图可以发现,我们可以用transform属性来实现透视效果,先沿X轴方向扭曲变换(skew),然后再沿Y轴方向进行缩放(scaleY),变换原点(transform-origin)为元素右下角位置,但是为了变换之后保持与文本底部对齐,所以变换原点坐标Y值为文本基线处位置。 基线位置是如何计算的呢,我们使用SVGTextElement的getBBox() 方法,具体的为: baseline = Math.abs(getBBox().y) 关于文本基线的相关知识这里不展开,大家可以猛戳此处查看。 另外还有一个地方需要注意:transform属性会直接修改到原有元素,因此需要单独使用一个dom元素做透视效果,这个dom元素在原有元素层级之下,比如上图的透视效果代码如下: image.png 具体css的代码如下:

.transform {
  transformskew(60deg0degscaleY(0.3);
    filterblur(1px);
    transform-origin150.469px 41.8711px;
}

其中filter用来做透视效果模糊处理,传入参数为模糊半径。

6、倒影效果

我们常看到的倒影效果如下图: image.png 我们可以使用css的-webkit-box-reflect属性,配合渐变画刷就可以实现倒影效果了,其中-webkit-box-reflect属性语法如下:

-webkit-box-reflect: [ above | below | right | left ]? <length><image>?

它主要由三个参数组成:

  • 方位:倒影朝向(above | below | right | left)
  • 偏移大小:倒影与原始元素之间的距离
  • 遮罩图片:对元素倒影的遮罩控制。语法类似于background-image。

如果遮罩图片用的是渐变画刷,要注意渐变方向的设置,因为是倒影所以参数是反的。 比如上图的倒影效果的代码如下:

{
  colorrgb(23712549);
  -webkit-box-reflect: below -13.8438px linear-gradient(rgba(25525525500%, 
    rgba(2552552550.1340%rgb(255255255));
}

最后

相信大家看完以上的介绍之后,应该对文字效果如何实现有所了解了,其实很多文字效果并不是单一效果来实现,通常都会由几种效果组合来完成的,比如下面的这个效果: image.png 它是由描边、填充、透视效果叠加之后的一个效果,为了保证最佳效果,大家要注意管理好各个效果的层级,比如上图,透视效果层级是最低的,填充效果是最高的。 这篇文章只是给大家简单介绍了一些常用的文字效果实现,在实际应用中需要给不同字号的文本设置效果,这时有些效果(透视、倒影)就需要考虑文字效果的基线对齐了,比如下面的效果: image.png 如何做基线对齐呢,因时间关系,我们下次再开讲,感谢大家的阅读~~