我们可以使用文本笔画

HTML

<h1>Sample Text</h1>

CSS

  h1{
    -webkit-text-stroke: 2px red;
    text-stroke: 2px red;
    }

小菜一碟。试试这个，而不是使用文本阴影

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

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

只要加上这个答案。“描边”和“提纲”是不一样的。

提纲看起来很棒。抚摸看起来很可怕。

其他地方列出的SVG解决方案也存在同样的问题。如果你想要一个大纲，你需要把文本放两遍。一次抚摸，又一次不抚摸。

描边不是勾勒轮廓

body { font-family: sans-serif; margin: 20px; } .stroked { color: white; -webkit-text-stroke: 1px black; } .thickStroked { color: white; -webkit-text-stroke: 10px black; } .outlined { color: white; text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000; } .thickOutlined { color: white; text-shadow: 0.0px 10.0px 0.02px #000, 9.8px 2.1px 0.02px #000, 4.2px -9.1px 0.02px #000, -8.0px -6.0px 0.02px #000, -7.6px 6.5px 0.02px #000, 4.8px 8.8px 0.02px #000, 9.6px -2.8px 0.02px #000, -0.7px -10.0px 0.02px #000, -9.9px -1.5px 0.02px #000, -3.5px 9.4px 0.02px #000, 8.4px 5.4px 0.02px #000, 7.1px -7.0px 0.02px #000, -5.4px -8.4px 0.02px #000, -9.4px 3.5px 0.02px #000, 1.4px 9.9px 0.02px #000, 10.0px 0.8px 0.02px #000, 2.9px -9.6px 0.02px #000, -8.7px -4.8px 0.02px #000, -6.6px 7.5px 0.02px #000, 5.9px 8.0px 0.02px #000, 9.1px -4.1px 0.02px #000, -2.1px -9.8px 0.02px #000, -10.0px -0.1px 0.02px #000, -2.2px 9.8px 0.02px #000, 9.1px 4.2px 0.02px #000, 6.1px -8.0px 0.02px #000, -6.5px -7.6px 0.02px #000, -8.8px 4.7px 0.02px #000, 2.7px 9.6px 0.02px #000, 10.0px -0.6px 0.02px #000, 1.5px -9.9px 0.02px #000, -9.3px -3.6px 0.02px #000, -5.5px 8.4px 0.02px #000, 7.0px 7.2px 0.02px #000, 8.5px -5.3px 0.02px #000, -3.4px -9.4px 0.02px #000, -9.9px 1.3px 0.02px #000, -0.8px 10.0px 0.02px #000, 9.6px 2.9px 0.02px #000, 4.9px -8.7px 0.02px #000, -7.5px -6.7px 0.02px #000, -8.1px 5.9px 0.02px #000, 4.0px 9.2px 0.02px #000, 9.8px -2.0px 0.02px #000, 0.2px -10.0px 0.02px #000, -9.7px -2.3px 0.02px #000, -4.3px 9.0px 0.02px #000, 7.9px 6.1px 0.02px #000 } svg { font-size: 40px; font-weight: bold; width: 450px; height: 70px; fill: white; } .svgStroke { fill: white; stroke: black; stroke-width: 20px; stroke-linejoin: round; } <h1 class="stroked">Properly stroked!</h1> <h1 class="outlined">Properly outlined!</h1> <h1 class="thickStroked">Thickly stroked!</h1> <h1 class="thickOutlined">Thickly outlined!</h1> <svg viewBox="0 0 450 70"> <text class="svgStroke" x="10" y="45">SVG Thickly Stroked!</text> </svg> <svg viewBox="0 0 450 70"> <text class="svgStroke" x="10" y="45">SVG Thickly Outlined!</text> <text class="svgText" x="10" y="45">SVG Thickly Outlined!</text> </svg>

PS:我想知道如何使SVG是任何任意文本的正确大小。我感觉这相当复杂，包括生成SVG，用Javascript查询它以获得范围，然后应用结果。如果有更简单的非js方式，我很想知道。

更新:正如@12me21指出的那样，在SVG中，你可以使用paint-order="stroke"在填充之前使它成为stroke，然后你就不必重复文本了

svg { 字体大小:40像素; 粗细:大胆的; 宽度:450 px; 身高:70 px; 填充:白色; ｝ .svgText { 填充:白色; 中风:黑色; 笔划宽度:15 px; stroke-linejoin:圆形; paint-order:中风; ｝ <svg viewBox="0 0 450 70"> <text class="svgText" x="10" y="45">< /文本> < / svg >

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

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

.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关闭亚像素渲染是个好主意。

我们可以使用文本笔画

HTML

<h1>Sample Text</h1>

CSS

  h1{
    -webkit-text-stroke: 2px red;
    text-stroke: 2px red;
    }

小菜一碟。试试这个，而不是使用文本阴影