Graphical Text Effects (CSS VS SVG:图像文字效果）

前言

原文来源:这里

作者: Sara Soueidan

译者: 临水照影

正文之前

午睡睡得昏昏沉沉，翻译一下sara女神的文章学点东西并提提神。译文有删减-0-，有些东西我懒得翻译。觉得有影响的可以去看原文-0-

正文

这篇文章是一系列技术探索文章中的第一篇，文中的例子可以同时用css和svg来实现。然后我们将进行对比。由于我偏好于svg，而且这篇文章真的证明了svg在解决某些WEB设计问题上比css更棒，因为它是图像和文档的结合格式。但为了保持一个客观的角度，我们会权衡每种技术的优点和缺点，并找出CSS和SVG可以更好的为设计服务的一面。

在这篇文章中，我们将用CSS和SVG创建一些图形文字效果。

用CSS来创建图形文字效果

老的CSS方法

假设你有一个H1标题而且你希望用令人印象深刻的图形效果来代替文本，这是你将用的CSS：

h1.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-image: url(…);
}

文本缩进确保内容超过了自身的边界并溢出它们。然后隐藏溢出的内容确保超出边界的内容。因此，你最终会得到一个没有文本内容的矩形的区域。

然后这个区域被背景图片填满，你可以用PS来完成吸引人的文本的图片。

用漂亮的图片来代替文本就是你要做的。

新的css方法

最常见的文字效果就是文字内部填充背景。

纹理填充文字

img1

利用css的background-clip属性，我们能够用图片填充文本。这个属性决定一个元素的背景绘图区。

background-clip属性在webkit内核的浏览器下有第四个属性 text,它可以裁剪背景图片到前景文字。然后，通过用-webkit-text-fill-color给文本一个透明色，这个背景图片将贯穿整个文字，完成裁剪效果。

举个例子：

.clippedElement {
  /* background image that will serve as text fill */
  background: url(path/to/your/image.jpg) no-repeat center center;
    /* -webkit-background-clip clips the background of the element to the text */
    -webkit-text-fill-color: transparent; /* overrides the white text color in webkit browsers */
    -webkit-background-clip: text;

  /* general styles */
    background-size: 100% auto;
    color: #fff;
    text-align: center;
    padding: 2em;
}

但不幸的是，这些效果无法在IE和Firefox上显示。

所以，如果我们给之前的H1应用这个类，它不会显示纹理效果。但如果用一个DIV来包含它，并给这个DIV的背景图片应用样式。它会显示对应效果。

Demo Click Here

如果你想用在非webkit内核的浏览器上展现这种效果，你可以用图片来代替。

注意，这里的图像可以是任何图像，甚至是CSS的梯度

纹理文本(带背景混合)

接下来，我们将用css 遮罩来制作下面的效果

img2

当用css遮罩时，我们让文本来采取其遮罩图片的形状，而不是让遮罩图片采取文字的形状。

这个效果用的遮罩图片来自是我之前写的一篇文章.图片用来当做遮罩来遮住文本区域并让它背后的背景通过遮罩显示。如果你选择了合适的纹理和背景，你将获得无缝融合的效果。我们采用的是一张飞溅墨点图，为了简单起见，我们没用任何混合，只是应用这个飞溅图。

img3

当你应用css遮罩到你的文本，这个文本需要在黑色区域中可见，遮罩图像的部分的文本必须是透明的。因为遮罩图像在CSS默认是透明遮罩，而不是亮度遮罩。当我们提供透明遮罩，黑色区域将被定义用来绘制文本。

我们将应用mask-image属性

h1 {
    /* the line that applies the splatter effect */
    mask-image: url(../img/splatter-mask_1.png); 

/* any general styles go here like font family, alignment, etc. */
}

Firefox只支持svg遮罩，webkit浏览器要求webkit前缀而且只支持特殊的两个属性。这是浏览器支持表

这是DEMO

如果你想用梯度遮罩，可以用下面的代码

mask-image: linear-gradient(black, transparent);

用svg，事情好像变得更加好了

图形文字与SVG

Svg超级棒（我不得不说）。现在，为了简单起见，我们将深入代码并解释它。

在SVG中工作时，无论是文本还是其它我们都将在<svg>元素中定义。

文本纹理填充

为了用纹理填充文本，我们需要定纹理，这里我们给svg文本填充颜色。

img4

代码如下：

<svg xmlns=“http://www.w3.org/2000/svg”  viewBox=“0 0 1250 400” width=“1250” height=“400”> 
    <title>Gradient-filled Text</title>
    <!— Source: http://lea.verou.me/2012/05/text-masking-the-standards-way/ —>
    <defs>
       <linearGradient id=“filler” x=“0%” y=“100%”>
           <stop stop-color=“gold” offset=“0%”></stop>
             <stop stop-color=“purple” offset=“20%”></stop>
           <stop stop-color=“deepPink” offset=“40%”></stop>
           <stop stop-color=“orange” offset=“60%”></stop>
           <stop stop-color=“yellow” offset=“80%”></stop>
           <stop stop-color=“skyblue” offset=“100%”></stop>
      </linearGradient>
    </defs>
    <text x=“100” y=“70%” font-size=“205” fill=“url(#filler)”> Radiant Text</text>
</svg>

注意：我们需要给svg元素定义高度和宽度，但为了让svg能够响应式，我们需要用css百分比覆盖默认尺寸。你可以在这里看到相关资料

<defs>中定义我们的纹理为线性填充。

这是demo

这里的纹理也可以是任何图片或者梯度。甚至可以是一个svg图案。

因为svg是一个图形，确保给它一个title让它能被屏幕阅读器识别。title对于svg就像alt属性对于在html页面中的img元素。

文本应用纹理（与背景混合）

与之前的技术类似，混合遮罩和背景。

这是我们想要完成的效果：

img5

这像文字被咬了好几口。

首先我们在图形编辑器中绘制创建一些咬痕遮罩。

之后我们导出为它们为svg形状，并放在<defs>中，像这样：

<svg viewBox=“0 0 900 400”>
  <defs>
    <mask id=“mask”>
      <rect x=“0” y=“0” width=“100%” height=“100%” fill=“#fff”></rect>
            <path fill=“#000” d=“…”></path>
            <path fill=“#000” d=“…”></path>
            <path fill=“#000” d=“…”></path>
            <path fill=“#000” d=“…”></path>
            <path fill=“#000” d=“…”></path>
            <path fill=“#000” d=“…”></path>
            <path fill=“#000” d=“…“></path>
            <path fill=“#000” d=“…“></path>
    </mask>
  </defs>

  <text font-size=“230” fill=“#FF481E” mask=“url(#mask)”>
    <tspan x=“0” y=“150”>nom</tspan>
    <tspan y=“280” x=“150”>nom<tspan>
    <tspan y=“400” x=“350”>nom<tspan>
  </text>
</svg>

这是一个很重要的知识点：在SVG中，不像CSS，元素会被默认的在白色区域中绘制，在黑色区域中不绘制。任何在黑白之间的值都会被渲染为半透明，越接近白色，遮罩越不透明，越接近黑色，遮罩越透明。

所以，在示例中，我给咬痕形状黑色填充。

DEMO CLICK HERE

然后你在这个SVG应用任何纹理，因为在<defs>有很多元素选择，你可以创建动态纹理来填充。

SVG中动态文本填充

Svg不仅能够让我们更好的支持模块化，SVG代码更能自然的动画化。

当你在<defs>中填充一个元素，你还可让它动起来。像下面这样：

img6

作为一个简单的例子，你可以用gif动画来填充。

以上的图片中例子都可在这里找到。

注意观察浏览器支持情况。

结尾

Svg比css更适合制作文本特效。

译者

Sara女神的每篇文章都很值得学习，而且干货满满。这篇文章因为太长了，我就精简了一下-0-，觉得不放心可以去看原文。

Table of Contents