笔画字体字符与较少的mixin

下面是一个生成笔画的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;
}

(它是基于pixelass答案，而不是使用SCSS)

为了详细说明已经提到的-webkit-text-stroke的一些答案，下面是使其工作的代码:

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

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

似乎有一个“文本描边”属性，但(至少对我来说)它只在Safari中有效。

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

更新

下面是一个生成笔画的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);
}

是的，老问题。有公认的(好的)答案。

但是…以防有人需要这个并且讨厌输入代码……

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

只是边境的长代码??…是的! !

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;

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

我最终尝试在JS (HTML canvas与IE canvas)中做到这一点，但它对性能影响很大(甚至在我的C2D机器上)。简而言之，如果你真的需要这种效果，考虑JS库(它们中的大多数应该能够在IE6上运行)，但不要因为性能问题而过度使用;如果你还需要其他选择……你可以使用SFiR，然后PS它和SFiR它。CSS3今天还没有准备好。

有一个实验性的CSS属性叫做text-stroke，在一些浏览器中被支持在-webkit前缀后面。

h1 { -webkit-text-stroke: 2px黑色;/*宽度和颜色*/ 字体类型:无;颜色:黄色; ｝ <标题> Hello World h1 > < /

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

h1 { /* 1像素黑色阴影左，上，右，下*/ 文本阴影:-1px 0黑，0 1px黑，1px 0黑，0 -1px黑; 字体类型:无;颜色:黄色; ｝ <标题> Hello World h1 > < /

但如果厚度超过1个像素，它就会变得模糊。