关于前端:CSS和SVG实现文字渐变描边投影

4次阅读

共计 9338 个字符，预计需要花费 24 分钟才能阅读完成。

在一些 web 流动页中常常能看到非凡解决的题目文字，比方这样的

临时疏忽掉非凡字体，通过设计稿的图层款式能够发现，共有 3 个文字特效，别离是突变、描边、投影

作为一个有谋求的前端，当然不会间接用图片啦~ 这里别离用 CSS 和 SVG 两种形式来实现，一起看看吧

舒适提醒：文章细节较多，不感兴趣的也能够间接跳到底部查看在线 demo

首先来看 CSS 中的实现。

CSS 中并没有间接的属性来设置文字突变，通常文字只能是纯色。不过能够通过背景裁剪 background-clip让背景色在文本区域显示进去，看着就像是文字有了突变

<p class="text"> 为你定制 发现精彩 </p>

.text{background-image: linear-gradient(#FFCF02, #FF7352);
  background-clip: text;
    -webkit-background-clip: text;
}

然而这样没什么成果，文字依然是默认色彩

起因其实很简略，因为是裁剪的背景，最初展现的其实是背景色彩，有色彩的文字笼罩在背景之上，所以这里须要将文字色彩设置为通明就行了，用 color 和 -webkit-text-fill-color都能够实现。

.text{background-image: linear-gradient(#FFCF02, #FF7352);
  background-clip: text;
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* 须要文字通明 */
}

这样就能够看到文字突变成果了

再来看看 SVG 中的文字突变。

SVG 中人造反对文字突变，齐全能够把文字当成一般的矢量门路，构造如下

<svg>
    <text> 为你定制 发现精彩 </text>
</svg>

间接通过 fill填充就行了，不过须要留神的是这里填充略微麻烦一点，突变不能像 CSS 那样，必须应用专门的突变标签 <linearGradient>，有趣味的能够查看 linearGradient – SVG | MDN (mozilla.org)，需定义在 <defs></defs>中

<svg>
  <defs>
    <linearGradient id="gradient">
      <stop offset="0%"  stop-color="#FFCF02"/>
      <stop offset="100%"  stop-color="#FF7352"/>
    </linearGradient>
  </defs>
    <text class="text"> 为你定制 发现精彩 </text>
</svg>

<linearGradient>中的 <stop> 标签用来定义突变的色彩坡度，offset 和 stop-color别离定义突变的节点和色彩，而后通过 fill属性填充突变（指明 id）

.text{fill: url(#gradient);
}

成果如下（并不是图片加载有问题）

这样下来有两个问题

文本程度方向和垂直方向都不居中
突变方向是程度向右的

首先看第一个问题。SVG 中对文字的自适应解决还是十分弱的，比方 CSS 中常见的主动换行 SVG 中只能手动在指定地位换行。这里居中须要用到两个属性 text-anchor和dominant-baseline，别离标文本锚点对齐和文本基线对齐，简略来说就是程度和垂直方向的对齐形式

.text{
  text-anchor: middle;
  dominant-baseline: middle;
  fill: url(#gradient);
}

同时 <text>还须要设置 x、y地位，这里的百分比能够和 CSS 中的背景地位百分比做类比

<text class="text" x="50%" y="50%"> 为你定制 发现精彩 </text>

这样就居中显示了

对于突变方向的问题，SVG 中是用 x1、y1、x2、y2 两组坐标来确定的。给定一个矩形，左上角是 [0，0]，右下角是 [1, 1]，这样任意角度都能够示意进去了

比方当初须要垂直向下方向的，那么能够在 <linearGradient> 设置 x1="0" y1="0" x2="0" y2="1"，如下

<svg>
  <defs>
    <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%"  stop-color="#FFCF02"/>
      <stop offset="100%"  stop-color="#FF7352"/>
    </linearGradient>
  </defs>
    <text class="text"> 为你定制 发现精彩 </text>
</svg>

成果如下

CSS 中有个专门用于文字描边的属性 -webkit-text-stroke，能够管制描边的宽度和色彩，比方

.text{-webkit-text-stroke: 2px #333;}

成果如下

的确有描边了，然而文字如同瘦了一圈，如果感觉不太显著，能够再设置大一点

从这里能够看出，-webkit-text-stroke其实是 居中描边，并且是笼罩在文本上的，也无奈更改描边形式。而事实上，很多设计工具都是能够抉择描边形式的，比方 figma

那么，如何实现外描边成果呢？

也是能够的！用两层文本，一层文本描边，一层文本突变就能够了，为了节俭标签，能够用伪元素来生成

<p class="text" data-title="为你定制 发现精彩"> 为你定制 发现精彩 </p>

::before设置突变，位于上方，原文本设置描边，位于下方，留神把 ::before的 -webkit-text-stroke 去除

.text::before{content: attr(data-title);
    position: absolute;
    background-image: linear-gradient(#FFCF02, #FF7352);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 0;
}
.text{-webkit-text-stroke: 6px #333;}

叠加示意如下

扭转不同的描边也不会呈现文字“变瘦”的状况

SVG 也能够实现描边成果，和 CSS 比拟相似，应该说 CSS 是借鉴 SVG 的，通过 stroke 和 stroke-width来管制描边色彩和大小，比方

.text{
  /* 其余 */
  stroke-width: 4px;
  stroke: #333;
}

能够失去这样的成果

和 CSS 体现一样，都是居中描边，也无奈扭转。

不一样的是，SVG 管制更为灵便，默认是先填充、而后再描边，所以看着是描边在填充之上，然而，咱们能够扭转这种规定，设置先描边，再填充，那么填充的色彩就会笼罩在描边之上了。SVG 中扭转这种规定的能够通过 paint-order 来设置，对于这个属性，有趣味的能够拜访张鑫旭老师的这篇文章：CSS paint-order 祝大家除夕高兴

.text{
  /* 其余 */
  stroke-width: 4px;
  stroke: #333;
  paint-order: stroke; /* 先描边 */
}

这样就实现了外描边成果，是不是比 CSS 不便许多？

除此之外，SVG 还能够设置描边门路的转角处的形态，比方 figma 中对于转角的设置如下

SVG 中与之绝对应的属性叫做 stroke-linejoin，这里是圆角，能够做如下设置

.text{
  /* 其余 */
  stroke-width: 4px;
  stroke: #333;
  paint-order: stroke; /* 先描边 */
  stroke-linejoin: round; /* 门路转角为圆角 */
}

各种属性成果如下

持续增加成果。CSS 能够通过 text-shadow来增加文本投影

.text{
    -webkit-text-stroke: 6px #333;
      text-shadow: 0 4px 0 #333;
}

后果变成了这样

起因其实还和文本突变无关，突变其实是背景色，文字是通明的，所以给文字增加暗影，后果暗影就笼罩在了背景之上。除了应用 text-shadow，还能够通过 drop-shadow 滤镜实现

.text{
    -webkit-text-stroke: 6px #333;
      filter: drop-shadow(0 4px 0 #333);
}

这样就完满实现了

SVG 就比拟灵便了，比方下面应用的 drop-shadow滤镜，其实就是借鉴了 SVG 中的 <feDropShadow> 滤镜，所以 SVG 也能够这样实现

<svg>
    <defs>
        <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%"  stop-color="#FFCF02"/>
          <stop offset="100%"  stop-color="#FF7352"/>
        </linearGradient>
          <filter id="shadow">
            <feDropShadow dx="0" dy="4" stdDeviation="0" flood-color="#333"/>
        </filter>
    </defs>
    <text x="50%" y="50%" class="text"> 为你定制 发现精彩 </text>
</svg>

这里 dx、dy、stdDeviation、flood-color 和 drop-shadow(dx,dy,stdDeviation,flood-color)中的参数是一一对应的，就不多阐明了，而后在文字中利用滤镜

.text{
  /* 其余 */
  filter:url(#shadow);
}

这样也能实现文字投影

其实 SVG 中大可不必这么麻烦，方才下面 text-shadow之所以不能应用，就是因为 CSS 实现的文字突变是背景，是假的文字突变，然而 SVG 中是真真正正的突变填充，所以没错，这里能够间接用 CSS 中的 text-shadow 来实现，SVG 和 CSS 当初很多属性和款式都互通了，如下

.text{
    /* 其余 */
      fill: url(#gradient);
      text-shadow: 0 4px 0 #333;
}

实现更加简洁

通常流动题目会采纳一些非凡的字体，英文字体还好，整个引入都能够，然而中文就不行了，大多数中文字体都十分大，可能达到几十 MB 或者几百 MB。其实咱们只须要用到呈现的字体，如果把呈现的文字这一部分的非凡字体独自提取进去，那么整个字体文件将大大减小，这个过程就叫做字体子集化。

那么该如何解决呢？

这里举荐一个工具 Fontmin – 字体子集化计划，对于字体子集化的原理，能够参考这篇文章：性能优化魔法师：中文字体实际篇 – 掘金

下载客户端后，导入字体文件.ttf，而后输出须要用到的文字，如下

点击生成，能够失去如下文件

其中第一个以 -embed 为后缀的 CSS，外面是转换 base64 后的文件，能够间接引入

@font-face {
    font-family: "HYLiLiangHeiJ Regular";
    src: url("HYLiLiangHeiJ Regular.eot"); /* IE9 */
    src: url("HYLiLiangHeiJ Regular.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, iOS 4.2+ */
    url("HYLiLiangHeiJ Regular.svg#HYLiLiangHeiJ Regular") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}
.text{
  /* 其余款式 */
  font-family: "HYLiLiangHeiJ Regular";
}

这样简直实现了和设计稿完全一致的成果

其实如果从头看下来，应该也能本人实现一个，既能把握原理，也能加深印象，齐全变成本人的了。不过可能不是每个同学都有工夫，或者可能静下心来钻研每一个案例，所以这里还是整顿了一下在线 demo，想要疾速看后果的间接拜访就行了，如下

CSS 实现能够拜访 text-css (codepen.io)

SVG 实现能够拜访 text-svg (codepen.io)

以上介绍了 CSS 和 SVG 两种不同的形式来实现文本的特殊效果，从成果来看，显然 SVG 要更胜一筹，比方描边更加平滑、也无需多层嵌套，但 CSS 也有劣势，比方渐变色和投影更加简略，总结一下

CSS 文字突变实质是背景裁剪，须要将文字色彩设为通明
SVG 文字人造反对突变填充，须要借助 linearGradient 标签
SVG 文本居中略微麻烦点，须要借助 text-anchor 和 dominant-baseline
CSS 和 SVG 描边都是居中描边，并且无奈扭转
CSS 外描边能够通过多层构造叠加实现
SVG 能够通过 paint-order 让填充绘制在描边之上
CSS 文本暗影在文字通明时会穿透过去，能够用 drop-shadow 模仿投影
SVG 中的 feDropShadow 和 CSS 中的 drop-shadow 相似
SVG 能够间接用 CSS 中的 text-shadow 实现文字投影
字体子集化 fontmin

CSS 和 SVG 各有劣势，也相互影响，SVG 中也能够应用很多 CSS 款式，CSS 中也开始引入很多 SVG 属性，在平时的开发中，能够充沛联合两者的劣势。最初，如果感觉还不错，对你有帮忙的话，欢送点赞、珍藏、转发❤❤❤

正文完

前端

发表至：前端

2021-09-23

0

关于前端:Maven

关于前端:精读Typescript-4546-新特性

关于前端:漫画-前端上下500年发展史的江湖恩怨情仇～

关于前端:vuerouter源码十三RouterLink源码分析

关于数据挖掘:思迈特软件Smartbi服务全面升级智慧旅游让景区焕发新机

关于前端:CSS和SVG实现文字渐变描边投影

一、CSS 文字突变

二、SVG 文字突变

三、CSS 文字描边

四、SVG 文字描边

五、CSS 文字投影

六、SVG 文字投影

七、非凡字体解决

八、总结和阐明

站内搜索