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支持
解决方法
正如CSS-Tricks atricle解释的那样：
The stroke drawn by text-stroke is aligned to the center of the text
shape (as is the default in Adobe Illustrator),and there is currently
no option to set the alignment to the inside or outside of the shape.
Unfortunately this makes it much less usable,as no matter what now
the stroke interferes with the shape of the letter destroying the
original type designers intent. A setting would be ideal,but if we
had to pick one,outside stroke would have been much more useful.
那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>
