当涉及到网页设计时，你的内容的视觉吸引力在吸引和保持你的观众的注意力方面起着至关重要的作用。设计的一个方面可以极大地影响你的网站的整体美感和可读性，那就是文字造型。
文本造型不仅仅是选择一种字体和字体颜色。它涉及到精心组合各种CSS属性以达到预期的效果，例如利用文本轮廓来使你的文本具有视觉冲击力。
在这篇文章中，我们将深入研究使用CSS对文本轮廓进行造型的艺术，并探讨它是如何与你可以使用的各种选项一起工作的。
了解Web文本
Web文本是显示在网页上的文本。字体在网络上显示文本方面起着至关重要的作用。这些字体本质上是基于矢量的图形，这意味着像素数据并不限制它们，可以在各种尺寸下呈现，同时保持它们的锐度和清晰度。
字体是基于矢量的图形，它的一个迷人之处在于能够在单个字符周围应用笔画或轮廓。就像在Adobe Illustrator等矢量程序中，你可以在形状周围画上一笔，CSS提供了在网络文本上实现同样效果的方法。
用CSS添加文本轮廓的2种方法
当谈到用CSS为你的文本添加轮廓效果时，你可以采用两种方法。让我们来探讨一下，看看这些方法的弊端以及如何使用它们。
1. 使用text-stroke属性
text-stroke 是一个CSS属性，你可以用它来为你的文本添加一个轮廓。它允许你指定轮廓的width 和 color。这个属性只被基于WebKit的浏览器支持，为了使用它，你必须添加 -webkit- 前缀。
例如，让我们为 h1 标题文本–“Welcome to WBOLT.COM” 添加轮廓：
<h1>Welcome to WBOLT.COM</h1>
这就是带有 -webkit- 前缀的 text-stroke 属性的使用方法：
h1 {
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: black;
}
-webkit-text-stroke-width 和 -webkit-text-stroke-color 分别指定笔画的 width 和 color。它将 width 设为 3px ， color 设为 black。
用text-stroke属性添加轮廓。
上面这两个属性可以和速记属性 -webkit-text-stroke 结合起来，它同时指定了笔画的 color 和 width。
h1 {
-webkit-text-stroke: 3px black;
}
这将得到相同的输出。
支持text-stroke属性
根据caniuse的说法，Internet Explorer浏览器不支持 text-stroke 属性。
对文本描边属性的支持。
如果你使用 text-stroke 属性来设置文本的轮廓，而用户使用的是不支持的浏览器，那么如果文本的颜色与背景颜色相匹配，那么这些文本可能就不可见。
为了解决这个问题，你可以使用 -webkit-text-fill-color 属性为文本设置一个 color ，并使用 color 属性设置一个后备颜色：
h1 {
color: black;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke: 3px black;
}
增加对不支持的浏览器的支持。
当一个浏览器不支持 text-stroke 属性时，它使用 color 属性设置的颜色。
当浏览器不支持时，可以回退。
另一个选择是在添加样式之前确认浏览器是否支持 -webkit-text-stroke 属性。
@supports (-webkit-text-stroke: 3px black) {
h1 {
-webkit-text-fill-color: white;
-webkit-text-stroke: 3px black;
}
}
2. 使用text-shadow属性
如果你不想处理支持差异，你可以使用 text-shadow 属性，它对所有流行浏览器的最新版本都有支持。
对text-shadow属性的支持。
对于 text-shadow 属性，我们将使用四个阴影，分别在右上角、左上角、左下角和右下角。
h1 {
color: #fff;
text-shadow:
3px 3px 0 #000,
-3px 3px 0 #000,
-3px -3px 0 #000,
3px -3px 0 #000;
}
在这个例子中，我们使用四个阴影来创建一个文本轮廓效果。每个阴影与文本有3个像素的偏移，颜色被设置为黑色（ #000 ）。这种效果类似于第一种方法产生的效果。
用text-shadow属性添加轮廓。
通过对文本的所有四个角施加阴影，我们实现了一个轮廓清晰的效果。请随意调整像素偏移、阴影颜色或文本颜色，以适应你的具体设计偏好。
这种方法给你带来了额外的优势，因为你可以根据适合文本的内容来调整水平和垂直的阴影。你还可以添加一点模糊半径：
h1 {
color: #fff;
text-shadow:
3px 3px 2px #000,
-3px 3px 2px #000,
-3px -3px 0 #000,
3px -3px 0 #000;
}
用文本阴影属性为轮廓添加模糊。
使用文本阴影的一个限制是，当阴影长度超过1像素时，你可能会遇到不连续的笔触效果（如果你与 text-stroke 方法比较，你会看到这一点）。
结合text-stroke和text-shadow属性
结合text-stroke和text-shadow属性你可以将这两个属性结合起来，以达到一种视觉上的震撼效果，将完美的文字轮廓与微妙的模糊和 text-shadow 属性所提供的额外效果结合起来。这种组合允许用一种多功能和可定制的方法来增强你的文本的外观。
h1 {
-webkit-text-stroke: 1px black;
color: white;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
结合文字描边和文字阴影来创建一个轮廓。
你也可以不用为每个角落添加单独的阴影，而用一条线来应用一个总的阴影：
#heading-1{
color: white;
-webkit-text-stroke: 1px #F8F8F8;
text-shadow: 0px 1px 4px #23430C;
}
#heading-2{
color: white;
-webkit-text-stroke: 1px #F8F8F8;
text-shadow: 0px 2px 4px red;
}
#heading-3{
color: #333;
-webkit-text-stroke: 1px #282828;
text-shadow: 0px 4px 4px #282828;
}
通过文本描边和文本阴影实现更多的轮廓实例。
小结
text-stroke 和 text-shadow 属性都为给你的文本添加轮廓提供了宝贵的选择。对它们的选择取决于浏览器的兼容性、所需的效果以及你的设计所需的控制水平。
评论留言