添加文字周围的笔画-在外面-与css？
我有以下HTML和CSS：
body { background-color: gray; }
h1 {
color: white;
font-size: 2.5em;
}<h1>WHAT CARRER SHOULD YOU HAVE ?</h1>
如下所示：
我想在它周围加上一个笔画，这意味着这些文字周围有一个黑色边框。
我在谷歌上搜索并找到了-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支持
回答 11
Stack Overflow用户
发布于 2014-10-29 07:26:21
-webkit-text-stroke不支持将笔画放在文本的外部
正如这个文章所解释的：
由文本笔画绘制的笔画与文本形状的中心对齐(在中是默认的)，目前没有选项将对齐设置为形状的内部或外部。不幸的是，这使得它的可用性大大降低，因为无论现在的笔画干扰了字母的形状，破坏了原始类型设计人员的意图。一个设置是理想的，但如果我们必须选择一个，外部中风将是更有用的。
那SVG呢？
好吧，它似乎也把中风放在里面-
然而，
您可以通过以下方法来模拟这种效果(取决于您需要什么)：
- 将字体更改为无衬线，如verdana和
- 增加要添加笔画的文本的字体大小。
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 CAREER SHOULD YOU HAVE?</h1>
<h1 class="no-stroke">WHAT CAREER SHOULD YOU HAVE?</h1>
Stack Overflow用户
发布于 2017-11-27 04:36:14
对于由文本阴影模拟的平滑的外部笔画，请使用以下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 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轴的解决方案。
Stack Overflow用户
发布于 2018-05-29 07:07:53
Firefox和Safari现在支持一个名为paint-order的新CSS属性，其中可以用来模拟外部笔划。
h1 {
color: #00ff01;
font-size: 3em;
-webkit-text-stroke: 5px black;
}
.fix-stroke {
paint-order: stroke fill;
}<h1>the default often is ugly</h1>
<h1 class="fix-stroke">paint-order: stroke fill </h1>
截图：
https://stackoverflow.com/questions/26634201
复制
相似问题
如何在图像周围添加笔画？
如何去除文字笔画css中尖锐的边缘？
编辑文字笔画颜色
画布笔画文字锐器
CSS:如何使背景色周围的文字不冲到文字？
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
