字母背后的简单轮廓。 适用于任何字体。任意轮廓宽度。

<style>
  text {
    stroke-linejoin: round;
    text-anchor: middle;
    fill: black;
    stroke: white;
    stroke-width: 12px;
    paint-order: stroke;
  }
</style>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle">Text</text>
</svg>

Codepen: https://codepen.io/RilDev/pen/vYeOjgj?editors=1000

使用更粗的笔画会有点混乱，如果你有sass的乐趣尝试这个mixin，不完美，取决于笔画的重量，它会生成相当多的css。

 @mixin stroke($width, $colour: #000000) {
      $shadow: 0 0 0 $colour; // doesn't do anything but I couldn't work out how to create a blank string and maintain commas
      @for $i from 0 through $width {
          $shadow: $shadow,
          -$i + px -$width + px 0 $colour,
          $i + px -$width + px 0 $colour,
          -$i + px $width + px 0 $colour,
          $i + px $width + px 0 $colour,
          -$width + px -$i + px 0 $colour,
          $width + px -$i + px 0 $colour,
          -$width + px $i + px 0 $colour,
          $width + px $i + px 0 $colour,
      }
      text-shadow: $shadow;
}

我很抱歉，但是如果您已经了解到这里，您将意识到所有其他答案都是不够的，或者需要SVG。

Note: This beautiful outlining will cost you the small price of maintaining a copy of the text in a data-content attribute, which is used by a layered CSS3 ::before element that renders the fill text over the actual outline. .outline { color: black; -webkit-text-stroke: 0.15em black; } .outline::before { content: attr(data-content); -webkit-text-fill-color: white; -webkit-text-stroke: 0; position: absolute; } .outline-wrapper { font-family: "DaytonaW01-CondensedBold", Impact, Times, serif; font-size: 50px; } <div class="outline-wrapper"> <div class="outline" data-content="Take-Two v Anderson">Take-Two v Anderson </div> </div> <link href="https://db.onlinewebfonts.com/c/998b5de3cda797387727724405beb7d4?family=DaytonaW01-CondensedBold" rel="stylesheet" type="text/css"/>

外部样式链接只是为了包含字体，而不是必需的——尽管使用细字体可能需要调整描边参数。

我用6种不同的阴影得到了更好的结果:

.strokeThis{
    text-shadow:
    -1px -1px 0 #ff0,
    0px -1px 0 #ff0,
    1px -1px 0 #ff0,
    -1px 1px 0 #ff0,
    0px 1px 0 #ff0,
    1px 1px 0 #ff0;
}

在CSS3中有一个实验性的webkit属性叫做text-stroke，我一直试图让这个工作一段时间，但到目前为止还没有成功。

我所做的是使用已经支持的文本阴影属性(我相信在Chrome, Firefox, Opera和IE 9中都支持)。

使用四个阴影来模拟笔画文本:

.strokeme { 颜色:白色; 背景颜色:白色; 文字阴影:-1px -1px 0 #000, 1px -1px 0 #000， -1px 1px 0 #000, 1px 1px 0 #000 ｝ < div class = " strokeme”> 此文本在某些浏览器中应该有笔画 < / div >

我在这里为你做了一个演示

这里有一个悬浮的例子

正如Jason C在评论中提到的，除了Opera Mini，所有主流浏览器都支持文本阴影CSS属性。这个解决方案可以向后兼容(对于自动更新的浏览器来说不是问题)，我认为应该使用文本笔画CSS。

编辑:文本笔画现在相当成熟，并在大多数浏览器中实现。它更容易，更清晰，更精确。如果您的浏览器用户可以支持它，那么您现在应该首先使用文本描边，而不是文本阴影。

你可以也应该只使用文本阴影效果，不需要任何偏移量:

.outline {
    color: #fff;
    text-shadow: #000 0px 0px 1px;
    -webkit-font-smoothing: antialiased;
}

为什么?当你偏移多个阴影效果时，你会开始注意到笨拙、锯齿状的角: 在一个位置上使用文本阴影效果可以消除偏移，这意味着 如果你觉得太薄，想要一个深色的轮廓，没有问题-你可以重复同样的效果(保持相同的位置和模糊)，几次。像这样:

text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;

下面是一个例子(上图)，同样的效果重复了14次(下图):

还要注意:因为线条变得很细，所以使用-webkit-font-smoothing: antialiased关闭亚像素渲染是个好主意。