在文本周围添加笔划 - 在外面 - 用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

进一步阐述其他text-shadow解决方案，以实现像素完美的粗圆形轮廓阴影的数量应随着笔画半径的增加而增加。例如，10px的粗轮廓需要2\xe2\x8b\x8510\xe2\x8b\x85\xcf\x80\xe2\x89\x88 63个分布在各个方向的阴影。要在 javascript 中生成它，可以这样：

\n

  const color = "#FFF" /* white outline */\n  const r = 10 /* width of outline in pixels */\n  const n = Math.ceil(2*Math.PI*r) /* number of shadows */\n  var str = \'\'\n  for(var i = 0;i<n;i++) /* append shadows in n evenly distributed directions */\n  {\n    const theta = 2*Math.PI*i/n\n    str += (r*Math.cos(theta))+"px "+(r*Math.sin(theta))+"px 0 "+color+(i==n-1?"":",")\n  }\n  document.querySelector("#myoutlinedtext").style.textShadow = str\n

\n

\n

如果厚度是静态的，则只需运行一次即可生成字符串并将其粘贴到 CSS 中。

\n

Answer 3

对于由文本阴影模拟的平滑外部笔划,请使用以下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 4

在-webkit-text-stroke不支持将行程上的文字外

正如这个CSS-Tricks atricle所解释的那样:

由文本笔划绘制的笔划与文本形状的中心对齐(Adobe Illustrator中的默认设置),并且当前没有选项可以将对齐设置为形状的内部或外部.不幸的是,这使得它的可用性降低了,因为无论现在中风如何干扰字母的形状都会破坏原始类型设计者的意图.设置将是理想的,但如果我们必须选择一个,外部中风会更有用.

那SVG怎么样？

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

小提琴

然而,

您可以通过以下方式模拟此效果(取决于您的需要):

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 5

Firefox和Safari现在支持名为CSS的新属性paint-order，该属性可用于模拟外部笔触：

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

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

Answer 6

我发现的一种方法是将两个元素彼此堆叠，让留在后面的元素获得双笔划宽度。后面的元素将笔划泄漏到可见元素的外部，使其成为外部的真实笔划。

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

这对于大行程值可能无法正常工作。

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

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>