텍스트에 그라데이션, 획, 그림자 효과를 추가하는 두 가지 방법(CSS 및 SVG)-CSS 튜토리얼-php.cn

이 글에서는 CSS와 SVG를 사용하여 텍스트에 그라데이션, 획, 그림자 효과를 추가하는 방법을 소개합니다. 도움이 되길 바랍니다.

텍스트에 그라데이션, 획, 그림자 효과를 추가하는 두 가지 방법(CSS 및 SVG)

이런 일부 웹 활동 페이지에서 특수 처리된 제목 텍스트를 자주 볼 수 있습니다.

텍스트에 그라데이션, 획, 그림자 효과를 추가하는 두 가지 방법(CSS 및 SVG)

당분간 특수 글꼴은 무시하고 있는 디자인 초안의 레이어 스타일을 통해 확인할 수 있습니다. 총 3개의 텍스트 효과입니다. 각각 Gradient, Stroke, Projection

텍스트에 그라데이션, 획, 그림자 효과를 추가하는 두 가지 방법(CSS 및 SVG)

야심찬 프론트 엔드로서 당연히 그림을 직접 사용하지는 않겠습니다~ 여기서는 CSS와 SVG를 사용하여 구현합니다. , 살펴봅시다 Bar

알림: 기사에 많은 세부정보가 포함되어 있으므로 관심이 없으면 바로 아래로 이동하여 온라인 데모를 볼 수 있습니다.

1. CSS 텍스트 그라데이션

먼저 살펴보겠습니다. CSS의 구현을 살펴보세요.

CSS에는 텍스트 그라데이션을 설정하는 직접적인 속성이 없습니다. 일반적으로 텍스트는 단색만 가능합니다. 그러나 배경 클리핑 background-clip을 사용하여 배경 색상을 텍스트 영역에 표시할 수 있습니다. 텍스트에 그라데이션이 있는 것처럼 보입니다.background-clip让背景色在文本区域显示出来，看着就像是文字有了渐变

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

로그인 후 복사

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

로그인 후 복사

但是这样没什么效果，文字仍然是默认颜色

텍스트에 그라데이션, 획, 그림자 효과를 추가하는 두 가지 방법(CSS 및 SVG)

原因其实很简单，由于是裁剪的背景，最后展示的其实是背景颜色，有颜色的文字覆盖在背景之上，所以这里需要将文字颜色设置为透明就行了，用 color 和 -webkit-text-fill-color都可以实现。

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

로그인 후 복사

这样就可以看到文字渐变效果了

텍스트에 그라데이션, 획, 그림자 효과를 추가하는 두 가지 방법(CSS 및 SVG)

二、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);
}

로그인 후 복사

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

텍스트에 그라데이션, 획, 그림자 효과를 추가하는 두 가지 방법(CSS 및 SVG)

这样下来有两个问题

文本水平方向和垂直方向都不居中
渐变方向是水平向右的

首先看第一个问题。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>

로그인 후 복사

这样就居中显示了

텍스트에 그라데이션, 획, 그림자 효과를 추가하는 두 가지 방법(CSS 및 SVG)

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

텍스트에 그라데이션, 획, 그림자 효과를 추가하는 두 가지 방법(CSS 및 SVG)

比如现在需要垂直向下方向的，那么可以在<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>

로그인 후 복사

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

로그인 후 복사

하지만 효과가 없습니다. 텍스트는 여전히 입니다. 기본 색상

텍스트에 그라데이션, 획, 그림자 효과를 추가하는 두 가지 방법(CSS 및 SVG)

🎜 🎜사실 이유는 매우 간단합니다. 크롭된 배경이기 때문에 최종 표시는 사실 배경색이고, 색칠된 텍스트는 배경에 가려져 있기 때문에 여기서는 텍스트 색상을 투명하게 설정해야 하는데, 를 사용하세요. color 및 -webkit-text-fill-color를 구현할 수 있습니다. 🎜

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

로그인 후 복사

🎜이렇게 하면 텍스트 그라데이션 효과를 볼 수 있습니다🎜🎜 텍스트에 그라데이션, 획, 그림자 효과를 추가하는 두 가지 방법(CSS 및 SVG)

🎜

2. SVG 텍스트 그라데이션🎜🎜SVG의 텍스트 그라데이션을 살펴보겠습니다. 🎜🎜SVG는 자연스럽게 텍스트 그라데이션을 지원합니다. 구조는 다음과 같습니다🎜

.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;
}

로그인 후 복사

🎜fill을 통해 직접 채우면 됩니다. 좀 더 번거롭습니다. Gradient CSS와는 달리 특수 Gradient 태그 <linearGradient>를 사용해야 합니다. 관심 있는 분은 linearGradient - SVG | MDN(mozilla.org)은

<에 정의되어야 합니다. ;defs>.text{
  /*其他*/
  stroke-width: 4px;
  stroke: #333;
}
로그인 후 복사
로그인 후 복사

三、CSS 文字描边

CSS 中有个专门用于文字描边的属性 -webkit-text-stroke，可以控制描边的宽度和颜色，比如

确实有描边了，但是文字好像瘦了一圈，如果觉得不太明显，可以再设置大一点

从这里可以看出，-webkit-text-stroke其实是 居中描边，并且是覆盖在文本上的，也无法更改描边方式。而事实上，很多设计工具都是可以选择描边方式的，比如 figma

也是可以的！用两层文本，一层文本描边，一层文本渐变就可以了，为了节省标签，可以用伪元素来生成

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

四、SVG 文字描边

SVG 也可以实现描边效果，和 CSS 比较类似，应该说 CSS 是借鉴 SVG 的，通过 stroke 和 stroke-width来控制描边颜色和大小，比如

不一样的是，SVG 控制更为灵活，默认是先填充、然后再描边，所以看着是描边在填充之上，但是，我们可以改变这种规则，设置先描边，再填充，那么填充的颜色就会覆盖在描边之上了。SVG 中改变这种规则的可以通过 paint-order 来设置，关于这个属性，有兴趣的可以访问张鑫旭老师的这篇文章：CSS paint-order祝大家元旦快乐

除此之外，SVG 还可以设置描边路径的转角处的形状，比如 figma 中关于转角的设置如下

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

五、CSS 文字投影

原因其实还和文本渐变有关，渐变其实是背景色，文字是透明的，所以给文字添加阴影，结果阴影就覆盖在了背景之上。除了使用text-shadow，还可以通过 drop-shadow滤镜实现

六、SVG 文字投影

SVG 就比较灵活了，比如上面使用的 drop-shadow滤镜，其实就是借鉴了 SVG 中的滤镜，所以 SVG 也可以这样实现

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

其实 SVG 中大可不必这么麻烦，刚才上面 text-shadow之所以不能使用，就是因为 CSS 实现的文字渐变是背景，是假的文字渐变，但是 SVG 中是真真正正的渐变填充，所以没错，这里可以直接用 CSS 中的 text-shadow 来实现，SVG 和 CSS 现在很多属性和样式都互通了，如下

七、特殊字体处理

通常活动标题会采用一些特殊的字体，英文字体还好，整个引入都可以，但是中文就不行了，大多数中文字体都非常大，可能达到几十MB或者几百MB。其实我们只需要用到出现的字体，如果把出现的文字这一部分的特殊字体单独提取出来，那么整个字体文件将大大减小，这个过程就叫做字体子集化。