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

发布时间：2020-12-14 23:44:33 所属栏目：资源来源：网络整理

导读：我有以下 HTML和CSS： body { background-color: gray; }h1 { color: white; font-size: 2.5em;} h1WHAT CARRER SHOULD YOU HAVE ?/h1 哪个呈现如下：我想在它周围添加一个笔划,这意味着围绕这些文本的黑色边框. 我用Google搜索并找到-webkit-text-stroke,

我有以下 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支持

解决方法

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

正如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怎么样？

好吧,它似乎也把中风放在里面 –

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!