CSS字体边框？
随着所有新的CSS3边界的东西（ -webkit ，…）是现在可以添加一个边界到你的字体？ （就像蓝色Twitter标志周围的白色边框一样）。 如果没有，那么在CSS / XHTML中有没有可以实现这一点的不太难看的黑客攻击？还是我还需要启动Photoshop？
正确的答案是：
h1 { color: yellow; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; }
<h1>Hello World</h1>
UPDATE
这是一个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字体，所以它需要比以前看到的答案更清洁…我采取每一边像素，以确保（几乎）没有差距“模糊“（handrawn或类似的）字体。 子像素（0.5像素）可以被添加，但我不需要它。
长码只是边界？ …是！！！
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;
你也许可以使用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属性更广泛，但我怀疑它对大多数用户是可用的，但这可能不是问题（优雅的降级，以及所有这一切）。
似乎有一个“文字笔画”的属性，但（至less对我来说）只能在Safari中使用。
为了更详细地阐述一些提到的-webkit-text-stroke的答案，下面是使其工作的代码：
div { -webkit-text-fill-color: black; -webkit-text-stroke-color: red; -webkit-text-stroke-width: 2.00px; }
关于使用文本笔划的深入文章在这里 ，支持文本笔划的浏览器列表在这里 。
以下是我正在使用的：
.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; }
用较less的mixin描述字体字符
这里有一个很小的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）
我曾经尝试去做那些圆angular，并用css3的东西放下阴影。 后来，我发现它的支持还是很差（当然是Internet Explorer（s））！
我最终试图在JS（HTMLcanvas与IEcanvas），但性能影响了很多（即使在我的C2D机器）。 总之，如果你真的需要这个效果的话，可以考虑JS库（大多数应该能够在IE6上运行），但是不要因为性能的影响。 如果你仍然有其他的select…就像你可以做SFiR，然后PS和SFiR。 今天CSS3还不够用。
text-shadow: 1px 1px 2px black, 1px -1px 2px black, -1px 1px 2px black, -1px -1px 2px black;
