h1 { 颜色:黑色; -webkit-text-fill-color:白色;/*将覆盖颜色(不管顺序)*/ -webkit-text-stroke-width: 1 px; -webkit-text-stroke-color:黑色; ｝ <标题>正确抚摸!< / h1 >

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

使用更粗的笔画会有点混乱，如果你有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;
}

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

<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

我也有这个问题，文本阴影不是一个选项，因为角落看起来很糟糕(除非我有很多很多阴影)，我不想要任何模糊，因此我唯一的其他选择是做以下:有2个div，对于背景div，放一个-webkit-text-stroke，然后允许尽可能大的轮廓你喜欢。

div { 字体大小:200 px; 位置:绝对的; 空白:nowrap;} ｝ .front { 颜色:蓝色; ｝ .outline { -webkit-text-stroke: 30px红色; 用户选择:没有; ｝ < div class = "大纲" > 大纲文本 < / div > < div class = "正面" > 大纲文本 < / div >

使用这种方法，我能够实现一个轮廓，因为如果你想让你的文本在非常大的轮廓下保持可读性，那么笔画宽度方法就不是一个选择(因为使用笔画宽度，轮廓将从字母内部开始，当宽度大于字母时，它就不容易读了。

注意:我需要这么粗的轮廓的原因是我在“谷歌地图”中模拟街道标签，我想在文本周围有一个白色的粗光晕。这个解决方案对我来说非常有效。

这里有一把小提琴展示了这个解

你可以尝试叠加多个模糊阴影，直到阴影看起来像笔画，如下所示:

.shadowOutline {
  text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;
}

这里有一个小提琴:http://jsfiddle.net/GGUYY/

我提到它只是为了以防有人感兴趣，尽管我不会称之为解决方案，因为它在很多方面都失败了:

它不能在旧的IE中工作 它在每种浏览器中的呈现方式都不一样 应用这么多阴影是非常沉重的处理:S