文本描边：夹在中间的你

有一种非标准的方式可以描边 HTML 文本（SVG 有一种标准的方式）。 它并不是特别新。 它有 -webkit- 和 -moz- 前缀。 Jen Simmons 最近 发布了关于它，并提供了一个示例。

span {
     -moz-text-fill-color: #fde;
  -webkit-text-fill-color: #fde;
     -moz-text-stroke-color: #666;
  -webkit-text-stroke-color: #666;
     -moz-text-stroke-width: 2px;  
  -webkit-text-stroke-width: 2px;
}

她说得对。

此 CSS 尚未完全完善或完全受支持。 但它足够好，可以用于今天，尤其是因为它只是提供了一种视觉增强效果。 对于使网站可用性至关重要。

我可能只会补充一点，如果您要执行类似在白色文本周围添加描边的操作，则可以将其包装在 @supports 中以确保它没问题（以防存在支持 text-fill-color 但不支持 text-stroke-color 的浏览器）

@supports 
  ((-webkit-text-stroke-color: #666)
  and
  (-webkit-text-fill-color: white))
  or
  ((-moz-text-stroke-color: #666)
  and
  (-moz-text-fill-color: white)) {
  span {
       -moz-text-fill-color: white;
    -webkit-text-fill-color: white;
       -moz-text-stroke-color: #666;
    -webkit-text-stroke-color: #666;
       -moz-text-stroke-width: 2px;  
    -webkit-text-stroke-width: 2px;
  }
}

查看 Chris Coyier 在 CodePen 上的笔 文本描边实际效果。 (@chriscoyier)

它破坏了大多数字体

这就是让我感到困扰的事情。 当您设置一个跨越字符设计边缘的描边时，您会失去形状的完整性。

这就是 CSS 中 text-stroke 的问题所在：您别无选择。 它只能进行居中对齐的描边。 从理论上讲，其他任何一个选项都更有用。 这不是什么大问题。 文本越大，字符越粗壮，越容易摆脱困境。

设置在后面技巧

如果您想模拟外部对齐的描边，James Nowland 展示了如何将伪元素文本设置在原始文本后面，并仍然使用 text-stroke。

查看 James Nowland 在 CodePen 上的笔 CSS3 描边和渐变文本。 (@jnowland)

更新！`paint-order` 有帮助

在我撰写此更新（2018 年 2 月）时，Tobi Reif 告诉我 Firefox Nightly 现在有一个名为 paint-order 的 CSS 属性，它可以帮助控制绘制在什么之上的顺序，描边或填充（或“标记”，我承认我不知道是什么）。

.stroke-behind {
  -webkit-text-stroke: 5px red;
  paint-order: stroke fill;
} 

这并不能帮助我们真正设置外部描边，但它可以很好地伪造它。 没有关于内部设置描边的消息。