在一些网页活动页面中，经常可以看到经过特殊处理的标题文字，比如这种特殊的字体，可以通过设计稿的图层样式发现。渐变、描边、投影三种文字特效。作为一个追求前端的，当然不会直接用图片啦～这里有两种用CSS和SVG实现的方法，一起来看看吧。温馨提示：文章的细节比较多，不感兴趣的可以直接跳到最下方查看在线演示。1.CSSTextGradient首先我们来看一下CSS中的实现。CSS中没有直接的属性来设置文本渐变，通常文本只能是纯色。但是，您可以剪切背景剪辑，使背景颜色显示在文本区域中，并且看起来文本具有渐变效果。为你定制，发现精彩
.text{background-image:linear-gradient(#FFCF02,#FF7352);背景剪辑：文本；-webkit-background-clip:text;}但是这个没有效果，文字还是默认的颜色原因其实很简单，因为是裁剪过的背景，最后显示出来的其实是背景色，而彩色的文字是叠加在背景上的，所以这里需要将文字颜色设置为透明，可以通过color和-webkit-text-fill-color来实现。.text{背景图像：线性渐变（#FFCF02，#FF7352）；背景剪辑：文本；-webkit-背景剪辑：文本；-webkit-text-fill-color：透明；/}这样就可以看到文字渐变效果了。2.SVG文字渐变我们来看看SVG中的文字渐变。SVG自然支持文本渐变，文本可以看成是普通的矢量路径。结构如下
直接通过fill进行填充即可，不过需要注意的是这里的Filling有点麻烦。渐变不能像CSS。您必须使用特殊的渐变标记
。如果您有兴趣，可以查看linearGradient-SVG|MDN(mozilla.org)，需要定义在中的标签用于定义渐变的颜色渐变，offset和stop-color分别定义渐变的节点和颜色，然后通过fill属性（指定id）填充渐变。text{fill:url(#gradient);}效果如下（不是图片加载的问题）。这样，有两个问题：文本水平方向和垂直方向都没有居中。渐变方向向右水平。先看第一个问题。SVG对文本的自适应处理还是很弱的。例如，在CSS中，自动换行很常见。在SVG中，您只能在指定位置手动换行。这里居中需要text-anchor和dominant-baseline两个属性，分别标记文本锚点对齐和文本基线对齐。简单来说就是水平垂直对齐。文本{文本锚点：中间；显性基线：中间；fill:url(#gradient);}同时，也需要设置x和y的位置。这里的百分比可以类比CSS中的背景位置百分比为你量身定做，发现精彩这样就可以中心化问题了渐变的方向，由SVG中的两组坐标x1、y1、x2、y2决定。给定一个矩形，左上角为[0,0]，右下角为[1,1]，这样可以表示任意角度。比如需要垂直向下的方向，可以设置x1="in0"y1="0"x2="0"y2="1"，如下效果如下3.CSStextstrokeCSS-webkit-text-stroke中有一个文字描边的特殊属性，可以控制描边的宽度和颜色，比如.text{-webkit-text-stroke:2px#333;}效果如下,确实有描边,但是文字好像比较细,如果觉得不明显可以从这里设置大一点可以看出-webkit-text-stroke其实是居中描边,并且覆盖在文字上，笔画方法不可更改。其实很多设计工具都可以选择描边方式，比如figma，那么怎么实现外描边效果呢？它也很好！只需使用两层文字，一层文字描边和一层文字渐变。为了节省标签，可以使用伪元素为你生成自定义发现精彩::before设置渐变，位于顶部，原文设置笔画，位于底部，注意去掉::before.text::before{content:attr(data-title);的-webkit-text-stroke位置：绝对；背景图像：线性渐变（#FFCF02，#FF7352）；背景剪辑：文本；-webkit-背景剪辑：文本；-text-stroke:0;}.text{-webkit-text-stroke:6px#333;}叠加提示如下改变不同的笔画不会让文字变“细”4.SVG文字笔画SVG的笔画效果也可以实现，类似于CSS。应该说CSS是基于SVG的，通过stroke和stroke-width来控制描边颜色和大小，比如.text{/*other*/stroke-width:4px;stroke:#333;}可以得到这个效果，和CSS表现一样，都是居中描边，不能改变。不同的是SVG控件更加灵活。默认是先填充，然后描边，因此看起来描边位于填充之上。但是，我们可以改变这个规则，先设置描边，再设置填充，然后填充颜色会叠加在描边上。在SVG中，这个规则的改变可以通过paint-order来设置。关于这个属性，有兴趣的可以看看张新旭的这篇文章：CSSpaint-orderWishyouhappyNewYear.text{/*Others*/stroke-width:4px;行程：#333；绘画顺序：描边；/*strokefirst*/}这样就实现了外描边效果，是不是比CSS更方便？此外，SVG还可以设置笔画路径的转角形状。比如figma中角的设置如下。SVG中对应的属性叫做stroke-linejoin，这里是圆角，可以设置如下。text{/*Others*/stroke-width:4px;行程：#333；绘画顺序：描边；/*先描边*/stroke-linejoin:round;/*Pathcornersarerounded*/}各种属性效果如下五，CSS文本投影继续添加效果。CSS可以通过text-shadow来添加文字投影。文本{-webkit-text-stroke:6px#333;text-shadow:04px0#333;}这个的原因其实和文字渐变有关，渐变其实就是背景色，而文字是透明的，所以给文字加上阴影会导致阴影覆盖背景。除了使用text-shadow，还可以通过drop-shadowfilter.text{-webkit-text-stroke:6px#333;filter:drop-shadow(04px0#333);}这是一个完美的实现六、SVG文本投影SVG更灵活。比如上面使用的阴影滤镜其实就是借鉴了SVG中的滤镜，所以SVG也可以这样实现。这里dx,dy,stdDeviation,flood-color和drop-shadow(dx,dy,stdDeviation,flood-color)中的参数是一一对应的，就不多解释了，然后应用filter中的text.text{/*other*/filter:url(#shadow);}这样也可以实现文字投影。其实在SVG中大可不必这么麻烦。刚才之所以不能使用text-shadow，是因为CSS实现的文字渐变是背景，是假的文字渐变，而在SVG中是真实的。渐变填充，所以是的，这里可以直接用CS通过S中的text-shadow实现，SVG和CSS现在可以与许多属性和样式互操作，如下所示。text{/*other*/fill:url(#gradient);text-shadow:04px0#333;}更简洁7.特殊字体处理通常，事件标题会使用一些特殊字体。英文字体还行，整个import也还好，就是中文字体不行。大多数中文字体都非常大，可能达到几十MB或几百MB。其实我们只需要使用出现的字体即可。如果把文中出现的特殊字体单独提取出来，整个字体文件会大大缩小。此过程称为字体子集化。那么如何处理呢？这里推荐一个工具Fontmin——一个字体子集方案。字体子集的原理可以参考这篇文章：性能优化魔术师：中文字体实践-掘金下载客户端后，导入字体文件.ttf，然后输入需要的文字，点击生成如下，即可得到以下文件中第一个带-embed后缀的CSS，即转换后的base64文件，可以直接导入@font-face{font-family:"HYLiLiangHeiJRegular";src:url("HYLiLiangHeiJRegular.eot");/*IE9*/src:url("HYLiLiangHeiJRegular.eot?#iefix")format("embedded-opentype"),/*IE6-IE8*/url(data:application/x-font-ttf;charset=utf-8;base64,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)format("truetype"),/*chrome、firefox、opera、Safari,Android,iOS4.2+*/url("HYLiLiangHeiJRegular.svg#HYLiLiangHeiJRegular")format("svg");/*iOS4.1-*/font-style:normal;font-weight:normal;}.text{/*Otherstyles*/font-family:"HYLiLiangHeiJRegular";}几乎达到了设计稿一样的效果。其实如果从头开始看，我自己应该也能实现一个。既能掌握原理，又能加深印象，完全成为自己的。但是，可能不是每个同学都有时间，或者能够静下心来研究每个案例，所以这里提供一个在线demo，如果想快速查看结果，可以直接访问。下面的CSS实现可以访问text-css(codepen.io)SVG实现可以访问text-svg(codepen.io)8.总结与解释以上介绍了CSS和SVG实现特殊文字效果的两种不同方式。从效果上看，显然SVG更胜一筹。比如笔触更流畅，不需要多层嵌套，但CSS也有优点，比如渐变和投影更简单。综上所述，CSS文字渐变的本质就是背景裁剪。您需要将文本颜色设置为透明。SVG文本自然支持渐变填充。需要使用linearGradient标签SVG文字居中有点麻烦，需要使用text-anchor和dominant-baselineCSS和SVG笔画都是居中笔画，CSS外笔画不能改。SVG可以通过多层结构叠加来实现。SVG可以通过paint-order来实现让填充绘制在描边之上。当文本透明时，CSS文本阴影会穿透。您可以使用drop-shadow来模拟SVG中的投影feDropShadow和CSS中的drop-shadow。类似于SVG，你可以直接在CSS中使用text-shadow。文本投影字体子集fontminCSS和SVG各有优势，相互影响。很多CSS样式也可以用在SVG中，很多SVG属性也被引入到CSS中。在平时的开发中，可以充分结合两者的优势。最后，如果觉得对你有帮助，请点赞、收藏、转发???
