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

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

更新

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

这是我正在使用的:

.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;
}

有一个实验性的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个像素，它就会变得模糊。

你可以使用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;
}

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

我将这里提到的所有解决方案进行了比较，以便快速概述:

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

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