CSS提高文字的对比度

将您的 JavaScript 提升到一个新的水平：前端大师.

网络上的字体本质上是基于矢量的图形。这就是为什么您可以以 12px 或 120px 显示它们并且它们保持清晰和相对锐利的原因。向量意味着它们的形状是由点和数学来描述形状的，而不是实际的像素数据。因为它们是矢量的，所以如果我们可以做其他矢量程序（例如 Adob​​e 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 显示：

正确抚摸！

回退到纯色。在 Firefox 中显示在此处

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

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

支持

此浏览器支持数据来自Caniuse，其中包含更多详细信息。数字表示浏览器支持该版本及更高版本的功能。

桌面

手机/平板电脑

模拟

我们可以通过不完全依赖 WebKit 专有技术来更进一步。我们可以使用该text-shadow属性（Firefox、Opera 和 IE 10 也支持）并模拟笔画。我们将使用四个阴影，每个 1px 的黑色偏移，没有扩展，一个到右上角、左上角、左下角和右下角。我们将删除 WebKit 专有的 -webkit-text-fill-color 以支持颜色，因为我们现在是跨浏览器兼容的。唯一的支持是 IE9 及以下版本，当然您可以使用 IE 特定的样式表来解决。

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

这是使用所有文本阴影的笔划。非常接近与真正的中风一样好。主要问题是您只能通过这种方式获得 1px 的笔画。再多，你就会看到差距。WebKit 文本笔画还有更多问题，但也存在问题，因此每个人都像一匹马。

结合

同时使用笔触和阴影会产生很好的效果。让我们继续使用 WebKit 笔画、全方位文本阴影笔画以及更深的文本阴影笔画。

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

看起来不错

演示

对齐

如果您熟悉 Adob​​e Illustrator，您可能知道可以在形状的内侧、外侧或居中对齐笔划。该选项在调色板中如下所示：

从左到右：中、内、外

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

从上到下：内、中、外。

对我来说，只有外部文本笔划对齐看起来有什么好处。不幸的是，对于 CSS 和 Illustrator 来说，不可更改的默认设置是居中的。解决方案只是不要对笔触边框的厚度过于疯狂，一切都应该没问题。注意：text-shadow-only解决方案没有这个问题，但也不能超过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;
  }
}