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

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

在一些 web 活動頁中經常能看到特殊處理的標題文字，比如這樣的

暫時忽略掉特殊字體，通過設計稿的圖層樣式可以發現，共有 3 個文字特效，分別是漸變、描邊、投影

作為一個有追求的前端，當然不會直接用圖片啦~ 這里分別用 CSS 和 SVG 兩種方式來實現，一起看看吧

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

一、CSS 文字漸變

首先來看 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 中天然支持文字漸變，完全可以把文字當成普通的矢量路徑，結構如下

<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 文字描邊

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 文字描邊

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 文字投影

繼續添加效果。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 文字投影

SVG 就比較靈活了，比如上面使用的 drop-shadow濾鏡，其實就是借鑒了 SVG 中的 濾鏡，所以 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";
}

這樣幾乎實現了和設計稿完全一致的效果

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