Html 在文本周围添加描边 - 在外面 - 使用 css？

Question

提问by wong2

I have the following HTML and CSS:

我有以下 HTML 和 CSS：

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

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

Which renders like this:

呈现如下：

enter image description here

在此处输入图片说明

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:

我想在它周围添加一个笔划，这意味着这些文本周围有一个黑色边框。
我在谷歌上搜索并找到了-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>

However, the effect is not what I want:

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

enter image description here

在此处输入图片说明

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

如您所见，似乎在文本内部添加了笔划，这使文本对我来说看起来太细了。

How can I make the stroke outside the text?

我怎样才能在文本外画笔画？

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

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

PS: only webkit support is needed

PS：只需要 webkit 支持

Answer 1

采纳答案by Danield

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

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

as this CSS-Tricks atricleexplains:

正如这个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.

text-stroke 绘制的笔触与文本形状的中心对齐（这是 Adobe Illustrator 中的默认设置），目前没有设置对齐到形状内部或外部的选项。不幸的是，这使得它的可用性大大降低，因为无论现在笔画会干扰字母的形状，破坏了原始字体设计者的意图。设置是理想的，但如果我们必须选择一个，外中风会更有用。

What about SVG?

SVG呢？

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

好吧，它似乎也将笔触放在了内侧 -

FIDDLE

小提琴

However,

然而，

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

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

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

1）将您的字体更改为像 verdana 这样的无衬线字体和

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

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 2

回答by nunoarruda

One option is to use text-shadowto simulate a stroke. Example:

一种选择是用来text-shadow模拟笔画。例子：

text-shadow:
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;

Answer 3

回答by Ryall

For a smooth outside stroke emulated by text shadow, use the following 8-axis shadow:

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

For customisation, you can use this SASS mixin instead (although changing the size does have side effects on rendering):

对于自定义，您可以使用此 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;
}

This gives a very smooth stroke, without missing parts like the above example (where it only uses 4 axis).

这提供了一个非常平滑的笔划，不会像上面的例子那样丢失部分（它只使用 4 轴）。

Answer 4

回答by Salman von Abbas

Firefox and Safari now support a new CSS property called paint-orderwhich can be used to simulate an outside stroke:

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>

Screenshot:

截屏：

Answer 5

回答by Prateek

I have also tried text-shadow and -webkit-text-stroke, but unsuccessful in all ways. I could only get the result by making two divs(background and foreground) i.e,

我也尝试过 text-shadow 和 -webkit-text-stroke，但各方面都不成功。我只能通过制作两个 div（背景和前景）来获得结果，即，

background div with -webkit-text-stroke and foreground div without -webkit-text-stroke.

带 -webkit-text-stroke 的背景 div 和不带 -webkit-text-stroke 的前景 div。

<div style="position:absolute;width:1280px;height:720px;left:0px;top:0px" >
    <div style="color:#CDCDCD;
                font-family:sans-serif;
                font-size:57px;
                -webkit-text-stroke-color:black;
                -webkit-text-stroke-width:0.04em;" >
        <p>
            Text with outine stroke outwards.
        </p>
    </div>
</div>

<div style="position:absolute;width:1280px;height:720px;left:0px;top:0px" >
    <div style="color:#CDCDCD;
                font-family:sans-serif;
                font-size:57px;" >
        <p>
            Text with outine stroke outwards.
        </p>
    </div>
</div>

Bt the only problem with the html generated through is twice the size(size in memory) as the div is repeated twice.

Bt 生成的 html 的唯一问题是大小（内存中的大小）的两倍，因为 div 重复两次。

Does anyone has some better solution?

有没有人有更好的解决方案？

Answer 6

回答by Dan Levin

i know this is an old question but have a look at this:

我知道这是一个老问题，但看看这个：

https://jsfiddle.net/1dbta9cq/

you can simply place another text on top of the stroked text with absolute positioning, it's not so tidy but it solves the problem

您可以简单地将另一个文本放置在具有绝对定位的描边文本之上，它不是那么整洁，但它解决了问题

<div class="container">
  <h1 class="stroke">Stroke</h1>
  <h1 class="no-stroke">Stroke</h1>
</div>

.container{
  width:300px;
}

.stroke{
  position:absolute;
  -webkit-text-stroke: 10px black;
}

.no-stroke{
  color:white;
  position:absolute
}

Answer 7

回答by BrunoLM

One way I found was to stack two elements on each other having the element that stays behind get the doublestroke width. The element behind leaks the stroke to the outside of the visible element making it a true stroke outside.

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

Also, another option is to use :afterto create this second element. The downside is that you can't programmatically change the stroke

此外，另一种选择是:after用于创建第二个元素。缺点是你不能以编程方式改变笔画

This might not work properly on big stroke values.

这可能无法在大笔画值上正常工作。

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>

Answer 8

回答by dmbaughman

Here's a SASS mixin I created to make it easy to create a text outline using the prefixed properties (-webkit, -moz) when supported, but falling back to just a color with text shadow. Note that the fallback doesn't work well with opaque fill colors, but other than that I think it's a pretty good solution, until we can get a standard method that has better browser support.

这是我创建的 SASS mixin，它可以在支持时使用前缀属性 ( -webkit, -moz)轻松创建文本轮廓，但回退到仅带有文本阴影的颜色。请注意，回退对不透明的填充颜色不起作用，但除此之外，我认为这是一个非常好的解决方案，直到我们能够获得具有更好浏览器支持的标准方法。

Fiddle

小提琴

Mixin

混入

@mixin text-stroke($fill-color, $stroke-color, $stroke-width) {
  color: $fill-color;
  text-shadow: -$stroke-width -$stroke-width 0 $stroke-color,
                $stroke-width -$stroke-width 0 $stroke-color,
               -$stroke-width  $stroke-width 0 $stroke-color,
                $stroke-width  $stroke-width 0 $stroke-color;

  @supports ((-webkit-text-stroke-color: $stroke-color) and (-webkit-text-fill-color: white))
            or ((-moz-text-stroke-color: $stroke-color) and (-moz-text-fill-color: white)) {
                        color: unset;
                  text-shadow: unset;
         -moz-text-fill-color: $fill-color;
      -webkit-text-fill-color: $fill-color;
       -moz-text-stroke-color: $stroke-color;
    -webkit-text-stroke-color: $stroke-color;
       -moz-text-stroke-width: $stroke-width;
    -webkit-text-stroke-width: $stroke-width;
  }
}

Example Usage

示例用法

(Makes text semi-transparent black with a white outline)

（使文本半透明黑色并带有白色轮廓）

.heading-outline {
  @include text-stroke(rgba(#000,.5), #fff, 1px);
}

Answer 9

回答by Muhammad Ameen Sheikh

Text shadow might be used to achieve this result http://css3generator.com

可以使用文本阴影来实现此结果 http://css3generator.com

Html 在文本周围添加描边 - 在外面 - 使用 css？

提问by wong2

采纳答案by Danield

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

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

What about SVG?

SVG呢？

However,

然而，

回答by nunoarruda

回答by Ryall

回答by Salman von Abbas

Screenshot:

截屏：

回答by Prateek

回答by Dan Levin

回答by BrunoLM

回答by dmbaughman

回答by Muhammad Ameen Sheikh

相关推荐

最近更新

标签

Html 在文本周围添加描边 - 在外面 - 使用 css？

提问by wong2

采纳答案by Danield

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

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

What about SVG?

SVG呢？

However,

然而，

回答by nunoarruda

回答by Ryall

回答by Salman von Abbas

Screenshot:

截屏：

回答by Prateek

回答by Dan Levin

回答by BrunoLM

回答by dmbaughman

回答by Muhammad Ameen Sheikh

相关推荐

如何在 IE 中的 HTML 选择下拉列表中设置字体系列？

Html 使用 CSS 和 Bootstrap 创建自定义复选框

Html html透明背景

Html 使用 href 属性删除下划线

相关推荐

最近更新

标签

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

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