CSS CSS字体边框？

CSS Font Border?

提问by Lars Tackmann

With all the new CSS3 border stuff going on (-webkit, ...) is it now possible to add a border to your font? (Like the solid white border around the blue Twitter logo). If not, are there any not-too-ugly hacks that will accomplish this in CSS/XHTML or do I still need to fire up Photoshop?

随着所有新的 CSS3 边框内容 ( -webkit, ...) 现在可以为您的字体添加边框吗？（就像蓝色 Twitter 徽标周围的纯白色边框一样）。如果没有，是否有任何不太难看的 hacks 可以在 CSS/XHTML 中实现这一点，或者我仍然需要启动 Photoshop？

回答by Narcélio Filho

There's an experimental CSS property called text-stroke, supported on some browsers behind a -webkit prefix.

有一个名为text-stroke的实验性 CSS 属性，某些浏览器支持 -webkit 前缀。

h1 {
    -webkit-text-stroke: 2px black; /* width and color */

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

Another possible trick would be to use four shadows, one pixel each on all directions, using property text-shadow:

另一个可能的技巧是使用四个阴影，每个方向一个像素，使用属性text-shadow：

h1 {
    /* 1 pixel black shadow to left, top, right and bottom */
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

But it would get blurred for more than 1 pixel thickness.

但是超过 1 个像素的厚度会变得模糊。

回答by Lars Tackmann

UPDATE

更新

Here's a SCSS mixin to generate the stroke: http://codepen.io/pixelass/pen/gbGZYL

这是用于生成笔划的 SCSS mixin：http: //codepen.io/pixelass/pen/gbGZYL

/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {List}            - text-shadow list
@function stroke($stroke, $color) {
  $shadow: ();
  $from: $stroke*-1;
  @for $i from $from through $stroke {
   @for $j from $from through $stroke {
      $shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
    }
  }
  @return $shadow;
}
/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {Style}           - text-shadow
@mixin stroke($stroke, $color) {
  text-shadow: stroke($stroke, $color);
}

YES old question.. with accepted (and good) answers..

是的老问题.. 接受（和好的）答案..

BUT...In case anybody ever needs this and hates typing code...

但是......如果有人需要这个并且讨厌输入代码......

THIS is a 2px black border with CrossBrowser support (not IE) I needed this for @fontface fonts so it needed to be cleaner than previous seen answers... I takes every side pixelwise to make sure there are (almost) no gaps for "fuzzy" (handrawn or similar) fonts. Subpixels (0.5px) could be added but I don't need it.

这是一个 2px 的黑色边框，支持 CrossBrowser（不是 IE）我需要这个 @fontface 字体，所以它需要比以前看到的答案更干净......我把每一面像素化以确保（几乎）没有间隙“模糊”（手绘或类似）字体。可以添加子像素（0.5px），但我不需要它。

Long code for just the border??? ...YES!!!

只是边界的长代码？？？...是的！！！

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

回答by David says reinstate Monica

You could perhaps emulatea text-stroke, using the css text-shadow(or -webkit-text-shadow/-moz-text-shadow) and a very low blur:

您也许可以使用 css （或/ ）和非常低的模糊度来模拟文本笔画：text-shadow-webkit-text-shadow-moz-text-shadow

#element
{
  text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
  -moz-text-shadow: 0 0 2px #000;
  -webkit-text-shadow: 0 0 2px #000;
}

But while this is more widely available than the -webkit-text-strokeproperty, I doubt that it's available to the majority of your users, but that might not be a problem (graceful degradation, and all that).

但是，虽然它比-webkit-text-stroke属性更广泛可用，但我怀疑它是否可供大多数用户使用，但这可能不是问题（优雅降级等等）。

回答by Ugtemlhrshrwzf

To elaborate more on some answers that have mentioned -webkit-text-stroke, here's is the code to make it work:

为了详细说明一些提到 -webkit-text-stroke 的答案，这是使其工作的代码：

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 2.00px; 
}

An in-depth article about using text stroke is hereand a list of browsers that support text stroke is here.

一篇关于使用文本笔画的深入文章在这里，支持文本笔画的浏览器列表在这里。

回答by andsve

There seems to be a 'text-stroke' property, but (at least for me) it only works in Safari.

似乎有一个 'text-stroke' 属性，但（至少对我而言）它只适用于 Safari。

http://webkit.org/blog/85/introducing-text-stroke/

http://webkit.org/blog/85/introducing-text-stroke/

回答by rAthus

Here's what I'm using :

这是我正在使用的：

.text_with_1px_border
{
    text-shadow: 
        -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000,
         1px  1px 0px #000;
}

.text_with_2px_border
{
    text-shadow: 
        /* first layer at 1px */
        -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000,
         1px  1px 0px #000,
        /* second layer at 2px */
        -2px -2px 0px #000,
        -1px -2px 0px #000,
         0px -2px 0px #000,
         1px -2px 0px #000,
         2px -2px 0px #000,
         2px -1px 0px #000,
         2px  0px 0px #000,
         2px  1px 0px #000,
         2px  2px 0px #000,
         1px  2px 0px #000,
         0px  2px 0px #000,
        -1px  2px 0px #000,
        -2px  2px 0px #000,
        -2px  1px 0px #000,
        -2px  0px 0px #000,
        -2px -1px 0px #000;
}

回答by Christian Toffolo

Stroke font-character with a Less mixin

具有较少混合的笔画字体字符

Here's a LESS mixin to generate the stroke: http://codepen.io/anon/pen/BNYGBy?editors=110

这是生成笔画的 LESS mixin：http://codepen.io/anon/pen/BNYGBy?editors=110

/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {List}            - text-shadow list
.stroke(@stroke, @color) {
  @maxi: @stroke + 1;
  .i-loop (@i) when (@i > 0) {
    @maxj: @stroke + 1;
    .j-loop (@j) when (@j > 0) {
      text-shadow+: (@i - 1)*(1px)  (@j - 1)*(1px) 0 @color;
      text-shadow+: (@i - 1)*(1px)  (@j - 1)*(-1px) 0 @color;
      text-shadow+: (@i - 1)*(-1px)  (@j - 1)*(-1px) 0 @color;
      text-shadow+: (@i - 1)*(-1px)  (@j - 1)*(1px) 0 @color;
      .j-loop(@j - 1);
    }
    .j-loop (0) {}
    .j-loop(@maxj);
    .i-loop(@i - 1);
  }
  .i-loop (0) {}
  .i-loop(@maxi);
  text-shadow+: 0 0 0 @color;
}

(it's based on pixelass answer that instead uses SCSS)

（它基于使用 SCSS 的 pixelass 答案）

回答by Grienauer

I created a comparison of all the solutions mentioned here to have a quick overview:

我对这里提到的所有解决方案进行了比较，以便快速概览：

<h1>with mixin</h1>
<h2>with text-shadow</h2>
<h3>with css text-stroke-width</h3>

https://codepen.io/Grienauer/pen/GRRdRJr

https://codepen.io/Grienauer/pen/GRRdRJr

回答by user2987790

text-shadow:
    1px  1px 2px black,
    1px -1px 2px black,
   -1px  1px 2px black,
   -1px -1px 2px black;

回答by xandy

I once tried to do those round corners and drop shadows with css3. Later on, I found it is still poorly supported (Internet Explorer(s), of course!)

我曾经尝试用 css3 做那些圆角和阴影。后来，我发现它的支持仍然很差（当然是 Internet Explorer！）

I ended up trying to do that in JS (HTML canvas with IE Canvas), but it impacts the performance a lot (even on my C2D machine). In short, if you really need the effect, consider JS libraries (most of them should be able to run on IE6) but don't over do it due to performance issues; if you still need an alternative... you could use SFiR, then PS it and SFiR it. CSS3 isn't ready today.

我最终尝试在 JS（带有 IE Canvas 的 HTML 画布）中做到这一点，但它对性能影响很大（即使在我的 C2D 机器上）。总之，如果你真的需要效果，可以考虑JS库（大部分应该可以在IE6上运行）但不要因为性能问题而过度使用；如果您仍然需要替代方案......您可以使用SFiR，然后PS它和SFiR它。CSS3 今天还没准备好。