在网页文本中添加描边

网页上的字体本质上是基于矢量的图形。 这就是为什么您可以以 12px 或 120px 显示它们，并且它们仍然清晰且边缘相对锐利。 矢量意味着它们的形状由点和数学来描述形状，而不是实际的像素数据。 由于它们是矢量，因此如果我们能够执行其他矢量程序（例如 Adobe Illustrator）可以对矢量文本执行的操作，例如在各个字符周围绘制描边，那将是有意义的。 没错，我们可以做到！ 例子

h1 {
  /* Prefix required. Even Firefox only supports the -webkit- prefix */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

或简写

h1 {
  -webkit-text-stroke: 1px black;
}

您可能在想“酷，但如果只有某些浏览器支持它，如果我将文本颜色设置为white，而我的背景为white，则描边在支持的浏览器中看起来很酷，但在不支持的浏览器中完全消失！”

一种可能性是这个

h1 {
  color: black;
  -webkit-text-fill-color: white; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

此处显示使用 Nate Piekos 的 @font-face 字体 Anime Ace 2

另一种可能性是仅在支持时应用

@supports (-webkit-text-stroke: 1px black) {
  h1 {
    -webkit-text-stroke: 1px black;
    -webkit-text-fill-color: white;
  }
}

支持

模拟

我们可以更进一步，不再完全依赖 WebKit 专有功能。 我们可以使用 text-shadow 属性（在 Firefox、Opera 和 IE 10 中也受支持）并模拟描边。 我们将使用四个阴影，每个阴影偏移 1px 的黑色，没有扩展，分别位于右上、左上、左下和右下。 我们将删除 WebKit 专有 -webkit-text-fill-color 以支持 color，因为我们现在是跨浏览器兼容的。 唯一例外的是 IE9 及更低版本，当然您可以使用 IE 特定的样式表来解决。

h1 {
  color: white;
  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}

组合

同时使用描边和阴影可以产生很好的效果。 让我们添加一个 WebKit 描边、全方位 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;
}

演示

对齐

如果您熟悉 Adobe Illustrator，您可能知道您可以将描边对齐到形状的内部、外部或居中。 该选项在调色板中看起来像这样

出于我不知情的原因，Illustrator 中的文本也只能设置为居中描边对齐。 但是，一旦您将文本扩展为常规矢量路径，所有三个选项都将可用。 Sam Frysteen 的提醒：在外观面板中添加新的描边，并将其移动到文本下方（基本上模拟外部描边对齐）。

对我来说，只有外部文本描边对齐看起来不错。 不幸的是，对于 CSS 和 Illustrator 来说，不可更改的默认值是居中。 解决方法只是不要对描边边框的粗细过于疯狂，事情应该会好起来。 注意：仅 text-shadow 的解决方案没有这个问题，但也不能描边超过 1px。

如果您使用伪元素，您可以描边原始文本后面的相同文本，并 有点伪造外部描边。

我们有一篇关于此对齐问题的完整文章： 文本描边：与你一起陷入困境。 一个小小的好消息是，paint-order 属性允许您基本上拥有外部设置的描边，一旦更多浏览器支持它。

我们无法做的事情

基于矢量的图形程序可以使用文本执行其他操作。 您可以水平压缩字母/垂直拉伸字母。 这种类型的文本处理几乎普遍不被认可，因此我们无法做到这一点，也没有什么损失。 您还可以将类型设置为不规则线（例如圆形）。 当然，用网页文本执行此操作会很酷。 也许我们可以设置文本以遵循其父元素的边框路径。

p.circular {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  
  /* NOT REAL */
  text-align: border-path;
}

在 Illustrator 中，我们还可以告诉描边如何处理尖角：圆角、斜角或斜接。 这些可以产生很好的效果，在网络上是不可能的。 但是，WebKit 处理角的方式在其默认设置（无论是什么）下都非常好，并且可以说比 Illustrator 中的任何选项都更好。

花哨

为记录在案，您可以对描边的颜色使用任何类型的颜色值（十六进制、rgba、hsla、关键字）。 这意味着如果您想要透明描边，它们确实会“堆叠”，因为如果描边相互重叠（常见），它们会更暗。

就关键帧动画而言，描边颜色会发生动画，但描边宽度不会（很奇怪）。

/* Only the color will change, not the width */
@keyframes colorchange {
  0% {
    -webkit-text-stroke: 10px red;
  }
  100% {
    -webkit-text-stroke: 20px green;
  }
}

更多信息

• text-stroke（CSS-Tricks 年鉴）
• 文本描边：与你一起陷入困境（Chris Coyier）
• CSS 文本阴影（Chris Coyier）
• 优雅的文本阴影（Chris Coyier）
• 使用 CSS 文本阴影的酷炫悬停效果（Temani Afif）
• 如何使用 CSS 创建霓虹灯文本（Silvia O’Dwyer）
• CSS text-shadow 属性（Alligator.io）