在文本周围添加笔划 - 在外面 - 用css？

Question

我有以下HTML和CSS：

body { background-color: gray; }
h1 {
  color: white;
  font-size: 2.5em;
}

<h1>WHAT CARRER SHOULD YOU HAVE ?</h1>

这样呈现：

我想在它周围添加一个笔划，这意味着这些文字周围会出现黑色边框 我用Google搜索并找到了-webkit-text-stroke，并提出了：

body { background-color: gray; }
h1 {
  color: white;
  font-size: 2.5em;
  -webkit-text-stroke: 2px black;
}

<h1>WHAT CARRER SHOULD YOU HAVE ?</h1>

然而，效果不是我想要的：

正如您所看到的，似乎笔划在文本中添加了 ，这使得文本看起来太薄了。

如何在文字外进行笔画？

小提琴：http://jsfiddle.net/jpjbk1z7/

PS：只需要webkit支持

Answer 1

一种选择是使用text-shadow来模拟笔画。例如：

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

Answer 2

对于由文本阴影模拟的平滑外部笔划，请使用以下8轴阴影：

  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;

对于自定义，您可以使用此SASS mixin（尽管更改大小确实会对渲染产生副作用）：

@mixin stroke($color: #000, $size: 1px) {
  text-shadow:
    -#{$size} -#{$size} 0 $color,
     0        -#{$size} 0 $color,
     #{$size} -#{$size} 0 $color,
     #{$size}  0        0 $color,
     #{$size}  #{$size} 0 $color,
     0         #{$size} 0 $color,
    -#{$size}  #{$size} 0 $color,
    -#{$size}  0        0 $color;
}

这样可以提供非常平滑的笔划，不会丢失上述示例中的部分（仅使用4轴）。

Answer 3

-webkit-text-stroke不支持将笔划放在文本外部

正如CSS-Tricks atricle所解释的那样：

  

由文本笔划绘制的笔划与文本的中心对齐   shape（在Adobe Illustrator中是默认设置），目前有   无法将对齐设置为形状的内部或外部。   不幸的是，无论现在如何，这都使得它的可用性降低了   中风干扰了破坏信件的形状   原型设计师的意图。设置将是理想的，但如果我们   不得不选一个，外面的中风会更有用。

SVG怎么样？

好吧它似乎也把笔画放在里面 -

<强> FIDDLE

然而，

您可以通过以下方式模拟此效果（取决于您的需要）：

1）将您的字体更改为像verdana和

这样的无衬线字体

2）将要添加笔划的文字的字体大小设为稍大的

body {
  background: grey;
  font-family: verdana;
}
.stroke,
.no-stroke {
  color: white;
  font-size: 2.5em;
}
.stroke {
  -webkit-text-stroke: 2px black;
   font-size: 2.7em;
}

<h1 class="stroke">WHAT CARRER SHOULD YOU HAVE ?</h1>
<h1 class="no-stroke">WHAT CARRER SHOULD YOU HAVE ?</h1>

Answer 4

Firefox和Safari现在支持一个名为paint-order的新CSS属性can be used to simulate an outside stroke：

＆＃13;

＆＃13;

body { background-color: gray; }
h1 {
  font-family: sans-serif;
  color: white;
  font-size: 2.5em;
  -webkit-text-stroke: 4px black;
   paint-order: stroke fill;
}

＆＃13;

<h1>WHAT CARRER SHOULD YOU HAVE ?</h1>

＆＃13;

＆＃13;

＆＃13;

Answer 5

我也尝试过text-shadow和-webkit-text-stroke，但各方面都没有成功。 我只能通过制作两个div（背景和前景）来获得结果，即

background div -webkit-text-stroke和前景div没有-webkit-text-stroke。

<div style="position:absolute;width:1280px;height:720px;left:0px;top:0px" >
    <div style="color:#CDCDCD;
                font-family:sans-serif;
                font-size:57px;
                -webkit-text-stroke-color:black;
                -webkit-text-stroke-width:0.04em;" >
        <p>
            Text with outine stroke outwards.
        </p>
    </div>
</div>

<div style="position:absolute;width:1280px;height:720px;left:0px;top:0px" >
    <div style="color:#CDCDCD;
                font-family:sans-serif;
                font-size:57px;" >
        <p>
            Text with outine stroke outwards.
        </p>
    </div>
</div>

Bt生成的html的唯一问题是两倍大小（内存大小），因为div重复两次。

有没有人有更好的解决方案？

Answer 6

我知道这是一个老问题，但看看这个：

https://jsfiddle.net/1dbta9cq/

你可以简单地在带有绝对定位的描边文本上放置另一个文本，它不是那么整洁但是它解决了问题

<div class="container">
  <h1 class="stroke">Stroke</h1>
  <h1 class="no-stroke">Stroke</h1>
</div>

.container{
  width:300px;
}

.stroke{
  position:absolute;
  -webkit-text-stroke: 10px black;
}

.no-stroke{
  color:white;
  position:absolute
}

Answer 7

我找到的一种方法是将两个元素叠加在一起，使得留下的元素获得 double 笔划宽度。后面的元素将笔划泄漏到可见元素的外部，使其成为外部的真实笔划。

另外，另一种选择是使用:after来创建第二个元素。缺点是您无法以编程方式更改笔画

这可能无法在大笔画值上正常工作。

＆＃13;

＆＃13;

body { background-color: gray; }
h1 {
  color: white;
  font-size: 2.5em;
  font-family: verdana;
}

.stroke { -webkit-text-stroke: 2px black; }

.stack .stroke { -webkit-text-stroke: 4px black; }
h1.stroke-fs { font-size: 2.7em; }

.stack { position: relative; }
.stack > h1:not(:first-child) {
  left: 0;
  margin: 0;
  position: absolute;
  top: 0;
}


.stroke-after:after { 
  -webkit-text-stroke: 4px black;
  content: attr(value);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

＆＃13;

Stack
<div class="stack">
  <h1 class="stroke">WHAT CARRER SHOULD YOU HAVE ?</h1>
  <h1>WHAT CARRER SHOULD YOU HAVE ?</h1>
</div>

<hr />

After
<div style="position: relative">
  <h1 class="stroke-after" value="WHAT CARRER SHOULD YOU HAVE ?">WHAT CARRER SHOULD YOU HAVE ?</h1>
</div>

<hr />

Native
<h1 class="stroke">WHAT CARRER SHOULD YOU HAVE ?</h1>

<hr />

Font size
<h1 class="stroke stroke-fs">WHAT CARRER SHOULD YOU HAVE ?</h1>

＆＃13;

＆＃13;

＆＃13;

Answer 8

这是我创建的SASS mixin，可以轻松使用带有前缀的属性（-webkit，-moz）来创建文本轮廓，但只能使用带有阴影的颜色。请注意，后退不适用于不透明的填充色，但除此之外，我认为这是一个很好的解决方案，直到我们能够获得具有更好浏览器支持的标准方法为止。

Fiddle

Mixin

@mixin text-stroke($fill-color, $stroke-color, $stroke-width) {
  color: $fill-color;
  text-shadow: -$stroke-width -$stroke-width 0 $stroke-color,
                $stroke-width -$stroke-width 0 $stroke-color,
               -$stroke-width  $stroke-width 0 $stroke-color,
                $stroke-width  $stroke-width 0 $stroke-color;

  @supports ((-webkit-text-stroke-color: $stroke-color) and (-webkit-text-fill-color: white))
            or ((-moz-text-stroke-color: $stroke-color) and (-moz-text-fill-color: white)) {
                        color: unset;
                  text-shadow: unset;
         -moz-text-fill-color: $fill-color;
      -webkit-text-fill-color: $fill-color;
       -moz-text-stroke-color: $stroke-color;
    -webkit-text-stroke-color: $stroke-color;
       -moz-text-stroke-width: $stroke-width;
    -webkit-text-stroke-width: $stroke-width;
  }
}

用法示例

（使文本半透明的黑色带有白色轮廓）

.heading-outline {
  @include text-stroke(rgba(#000,.5), #fff, 1px);
}

Answer 9

文本阴影可能用于实现此结果 http://css3generator.com