在文本周围添加描边 - 在外部 - 使用CSS？ [英] Add stroke around text - on the outside - with css?

问题描述

我有以下HTML和CSS：

  body {background-颜色：灰色} h1 {color：white;}} font-size：2.5em;}  

 < h1&您应该拥有什么卡通？< / h1>  

像这样：

我想在其周围添加一个笔触，这意味着这些文本周围有一个黑色边框。

我Googled并找到 -webkit -text-stroke ，并提出：

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

  ; h1>您应该拥有什么卡通？< / h1>  

但是，效果不是我想要的效果：

如您所见，在文本中添加内部

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

PS：只需要webkit支持

解决方案

-webkit-text-stroke 不支援将笔触放在文字外侧

，因为此 CSS-Tricks atricle 解释：

笔画对齐到文本
形状的中心（如在Adobe Illustrator中的默认），并且当前有
无选项以将对齐设置为形状的内部或外部。
不幸的是，这使得它不太可用，因为无论现在
笔划干扰信的形状破坏
原始类型设计师的意图。一个设置是理想的，但如果我们
必须选择一个，外面的中风会更有用。

SVG是什么？

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

FIDDLE

但是，>

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

1）将您的字体更改为sans serif如verdana和

2）使您添加笔触的文本的字体大小略大

  body {background：gray; 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>您应该拥有什么卡通？< / h1>< h1 class =no-stroke>您应该拥有什么卡通？< / h1>  

I have the following HTML and CSS:

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

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

Which renders like this:

I want to add a stroke around it, that means a black border around these text.
I Googled and found -webkit-text-stroke, and came up with:

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

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

However, the effect is not what I want:

As you can see, it seems that the stroke is added inside the text, which make the text looks too thin for me.

How can I make the stroke outside the text?

Fiddle: http://jsfiddle.net/jpjbk1z7/

PS: only webkit support is needed

解决方案

The -webkit-text-stroke doesn't support placing the stroke on the outside of the text

as this CSS-Tricks atricle explains:

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.

What about SVG?

Well it seems that it also places the stroke on the inside -

FIDDLE

However,

you might be able to simulate this effect (depending on what you need) by:

1) Change your font to a sans serif like verdana and

2) Make the font-size of text you are adding a stroke to slightly larger

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>

这篇关于在文本周围添加描边 - 在外部 - 使用CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！