CSS和SVG如何給文字添加漸變、描邊、投影效果

這篇文章給大家分享的是有關(guān)CSS和SVG如何給文字添加漸變、描邊、投影效果的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

在一些 web 活動(dòng)頁(yè)中經(jīng)常能看到特殊處理的標(biāo)題文字，比如這樣的

暫時(shí)忽略掉特殊字體，通過(guò)設(shè)計(jì)稿的圖層樣式可以發(fā)現(xiàn)，共有 3 個(gè)文字特效，分別是漸變、描邊、投影

作為一個(gè)有追求的前端，當(dāng)然不會(huì)直接用圖片啦~ 這里分別用 CSS 和 SVG 兩種方式來(lái)實(shí)現(xiàn)，一起看看吧

溫馨提示：文章細(xì)節(jié)較多，不感興趣的也可以直接跳到底部查看在線 demo

一、CSS 文字漸變

首先來(lái)看 CSS 中的實(shí)現(xiàn)。

CSS 中并沒有直接的屬性來(lái)設(shè)置文字漸變，通常文字只能是純色。不過(guò)可以通過(guò)背景裁剪 background-clip讓背景色在文本區(qū)域顯示出來(lái)，看著就像是文字有了漸變

<p class="text">為你定制 發(fā)現(xiàn)精彩</p>

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

但是這樣沒什么效果，文字仍然是默認(rèn)顏色

原因其實(shí)很簡(jiǎn)單，由于是裁剪的背景，最后展示的其實(shí)是背景顏色，有顏色的文字覆蓋在背景之上，所以這里需要將文字顏色設(shè)置為透明就行了，用 color 和 -webkit-text-fill-color都可以實(shí)現(xiàn)。

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

這樣就可以看到文字漸變效果了

二、SVG 文字漸變

再來(lái)看看 SVG 中的文字漸變。

SVG 中天然支持文字漸變，完全可以把文字當(dāng)成普通的矢量路徑，結(jié)構(gòu)如下

<svg>
  <text>為你定制 發(fā)現(xiàn)精彩</text>
</svg>

直接通過(guò) fill填充就行了，不過(guò)需要注意的是這里填充稍微麻煩一點(diǎn)，漸變不能像 CSS 那樣，必須使用專門的漸變標(biāo)簽 <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">為你定制 發(fā)現(xiàn)精彩</text>
</svg>

<linearGradient>中的 <stop> 標(biāo)簽用來(lái)定義漸變的顏色坡度，offset 和 stop-color分別定義漸變的節(jié)點(diǎn)和顏色，然后通過(guò) fill屬性填充漸變（指明 id ）

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

效果如下（并不是圖片加載有問(wèn)題哦）

這樣下來(lái)有兩個(gè)問(wèn)題

• 文本水平方向和垂直方向都不居中

• 漸變方向是水平向右的

首先看第一個(gè)問(wèn)題。SVG 中對(duì)文字的自適應(yīng)處理還是非常弱的，比如 CSS 中常見的自動(dòng)換行 SVG 中只能手動(dòng)在指定位置換行。這里居中需要用到兩個(gè)屬性 text-anchor和dominant-baseline，分別標(biāo)文本錨點(diǎn)對(duì)齊和文本基線對(duì)齊，簡(jiǎn)單來(lái)說(shuō)就是水平和垂直方向的對(duì)齊方式

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

同時(shí) <text>還需要設(shè)置 x、y位置，這里的百分比可以和 CSS 中的背景位置百分比做類比

<text class="text" x="50%" y="50%">為你定制 發(fā)現(xiàn)精彩</text>

這樣就居中顯示了

關(guān)于漸變方向的問(wèn)題，SVG 中是用x1、y1、x2、y2兩組坐標(biāo)來(lái)確定的。給定一個(gè)矩形，左上角是 [0，0]，右下角是 [1, 1]，這樣任意角度都可以表示出來(lái)了

比如現(xiàn)在需要垂直向下方向的，那么可以在<linearGradient>設(shè)置 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">為你定制 發(fā)現(xiàn)精彩</text>
</svg>

效果如下

三、CSS 文字描邊

CSS 中有個(gè)專門用于文字描邊的屬性 -webkit-text-stroke，可以控制描邊的寬度和顏色，比如

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

效果如下

確實(shí)有描邊了，但是文字好像瘦了一圈，如果覺得不太明顯，可以再設(shè)置大一點(diǎn)

從這里可以看出，-webkit-text-stroke其實(shí)是 居中描邊，并且是覆蓋在文本上的，也無(wú)法更改描邊方式。而事實(shí)上，很多設(shè)計(jì)工具都是可以選擇描邊方式的，比如 figma

那么，如何實(shí)現(xiàn)外描邊效果呢？

也是可以的！用兩層文本，一層文本描邊，一層文本漸變就可以了，為了節(jié)省標(biāo)簽，可以用偽元素來(lái)生成

<p class="text" data-title="為你定制 發(fā)現(xiàn)精彩">為你定制 發(fā)現(xiàn)精彩</p>

::before設(shè)置漸變，位于上方，原文本設(shè)置描邊，位于下方，注意把 ::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;
}

疊加示意如下

改變不同的描邊也不會(huì)出現(xiàn)文字“變瘦”的情況

四、SVG 文字描邊

SVG 也可以實(shí)現(xiàn)描邊效果，和 CSS 比較類似，應(yīng)該說(shuō) CSS 是借鑒 SVG 的，通過(guò) stroke 和 stroke-width來(lái)控制描邊顏色和大小，比如

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

可以得到這樣的效果

和 CSS 表現(xiàn)一樣，都是居中描邊，也無(wú)法改變。

不一樣的是，SVG 控制更為靈活，默認(rèn)是先填充、然后再描邊，所以看著是描邊在填充之上，但是，我們可以改變這種規(guī)則，設(shè)置先描邊，再填充，那么填充的顏色就會(huì)覆蓋在描邊之上了。SVG 中改變這種規(guī)則的可以通過(guò) paint-order 來(lái)設(shè)置，關(guān)于這個(gè)屬性，有興趣的可以訪問(wèn)張?chǎng)涡窭蠋煹倪@篇文章：CSS paint-order祝大家元旦快樂(lè)

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

這樣就實(shí)現(xiàn)了外描邊效果，是不是比 CSS 方便許多？

除此之外，SVG 還可以設(shè)置描邊路徑的轉(zhuǎn)角處的形狀，比如 figma 中關(guān)于轉(zhuǎn)角的設(shè)置如下

SVG 中與之相對(duì)應(yīng)的屬性叫做 stroke-linejoin，這里是圓角，可以做如下設(shè)置

.text{
  /*其他*/
  stroke-width: 4px;
  stroke: #333;
  paint-order: stroke; /*先描邊*/
  stroke-linejoin: round; /*路徑轉(zhuǎn)角為圓角*/
}

各種屬性效果如下

五、CSS 文字投影

繼續(xù)添加效果。CSS 可以通過(guò) text-shadow來(lái)添加文本投影

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

結(jié)果變成了這樣

原因其實(shí)還和文本漸變有關(guān)，漸變其實(shí)是背景色，文字是透明的，所以給文字添加陰影，結(jié)果陰影就覆蓋在了背景之上。除了使用text-shadow，還可以通過(guò) drop-shadow濾鏡實(shí)現(xiàn)

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

這樣就完美實(shí)現(xiàn)了

六、SVG 文字投影

SVG 就比較靈活了，比如上面使用的 drop-shadow濾鏡，其實(shí)就是借鑒了 SVG 中的 濾鏡，所以 SVG 也可以這樣實(shí)現(xiàn)

<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">為你定制 發(fā)現(xiàn)精彩</text>
</svg>

這里dx、dy、stdDeviation、flood-color和 drop-shadow(dx,dy,stdDeviation,flood-color)中的參數(shù)是一一對(duì)應(yīng)的，就不多說(shuō)明了，然后在文字中應(yīng)用濾鏡

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

這樣也能實(shí)現(xiàn)文字投影

其實(shí) SVG 中大可不必這么麻煩，剛才上面 text-shadow之所以不能使用，就是因?yàn)?CSS 實(shí)現(xiàn)的文字漸變是背景，是假的文字漸變，但是 SVG 中是真真正正的漸變填充，所以沒錯(cuò)，這里可以直接用 CSS 中的 text-shadow 來(lái)實(shí)現(xiàn)，SVG 和 CSS 現(xiàn)在很多屬性和樣式都互通了，如下

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

實(shí)現(xiàn)更加簡(jiǎn)潔

七、特殊字體處理

通?；顒?dòng)標(biāo)題會(huì)采用一些特殊的字體，英文字體還好，整個(gè)引入都可以，但是中文就不行了，大多數(shù)中文字體都非常大，可能達(dá)到幾十MB或者幾百M(fèi)B。其實(shí)我們只需要用到出現(xiàn)的字體，如果把出現(xiàn)的文字這一部分的特殊字體單獨(dú)提取出來(lái)，那么整個(gè)字體文件將大大減小，這個(gè)過(guò)程就叫做字體子集化。

那么該如何處理呢？

這里推薦一個(gè)工具 Fontmin - 字體子集化方案，關(guān)于字體子集化的原理，可以參考這篇文章：性能優(yōu)化魔法師：中文字體實(shí)踐篇 - 掘金

下載客戶端后，導(dǎo)入字體文件.ttf，然后輸入需要用到的文字，如下

點(diǎn)擊生成，可以得到如下文件

其中第一個(gè)以-embed為后綴的 CSS，里面是轉(zhuǎn)換 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";
}

這樣幾乎實(shí)現(xiàn)了和設(shè)計(jì)稿完全一致的效果

感謝各位的閱讀！關(guān)于“CSS和SVG如何給文字添加漸變、描邊、投影效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！