有一个名为 text-stroke、supported on some browsers behind a -webkit prefix 的实验性 CSS 属性。
h1 { -webkit-text-stroke: 2px 黑色； /* 宽度和颜色 */ font-family: sans;颜色：黄色； }
你好世界
另一个可能的技巧是使用属性 text-shadow 使用四个阴影，每个方向上一个像素：
h1 { /* 左、上、右、下各 1 像素黑色阴影 */ text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;字体系列：sans；颜色：黄色； }
你好世界
但它会在超过 1 个像素的厚度时变得模糊。
更新
这是用于生成笔画的 SCSS 混合：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);
}
https://i.stack.imgur.com/btzoG.png
是的老问题..接受（和好的）答案..
但是......如果有人需要这个并且讨厌输入代码......
这是一个带有 CrossBrowser 支持（不是 IE）的 2px 黑色边框模糊”（手绘或类似）字体。可以添加子像素（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;
您或许可以模拟一个文本笔划，使用 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 属性更广泛地可用，但我怀疑它是否适用于您的大多数用户，但这可能不是问题（优雅降级等等）。
这是我正在使用的：
.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;
}
抱歉，我迟到了，但谈到 text-shadow，我想你也会喜欢这个例子（当我需要在文本上有良好的阴影时，我经常使用它）：
text-shadow:
-2px -2px lightblue,
-2px -1.5px lightblue,
-2px -1px lightblue,
-2px -0.5px lightblue,
-2px 0px lightblue,
-2px 0.5px lightblue,
-2px 1px lightblue,
-2px 1.5px lightblue,
-2px 2px lightblue,
-1.5px 2px lightblue,
-1px 2px lightblue,
-0.5px 2px lightblue,
0px 2px lightblue,
0.5px 2px lightblue,
1px 2px lightblue,
1.5px 2px lightblue,
2px 2px lightblue,
2px 1.5px lightblue,
2px 1px lightblue,
2px 0.5px lightblue,
2px 0px lightblue,
2px -0.5px lightblue,
2px -1px lightblue,
2px -1.5px lightblue,
2px -2px lightblue,
1.5px -2px lightblue,
1px -2px lightblue,
0.5px -2px lightblue,
0px -2px lightblue,
-0.5px -2px lightblue,
-1px -2px lightblue,
-1.5px -2px lightblue;
由于 webkit 似乎对我不利，我对答案并不满意。然后我找到了这个可以为您生成 raw CSS 的 codepen。只需在 JS 中输入颜色和边框宽度，然后向下滚动到 CSS 输出。
2px黑色文本轮廓示例：
text-shadow: -2px -2px 0 black,-2px -1px 0 black,-2px 0px 0 black,-2px 1px 0 black,-2px 2px 0 black,-1px -2px 0 black,-1px -1px 0 black,-1px 0px 0 black,-1px 1px 0 black,-1px 2px 0 black,0px -2px 0 black,0px -1px 0 black,0px 0px 0 black,0px 1px 0 black,0px 2px 0 black,1px -2px 0 black,1px -1px 0 black,1px 0px 0 black,1px 1px 0 black,1px 2px 0 black,2px -2px 0 black,2px -1px 0 black,2px 0px 0 black,2px 1px 0 black,2px 2px 0 black
以防万一 codepen 被删除 (Vue.js)：
new Vue({
el: '#app',
data: {
width: 5,
color: 'DeepPink',
styles: ''
},
created() {
this.textChange()
},
methods: {
textChange() {
var shadows = []
var color = this.color
for(let i = -this.width; i <= this.width; i++) {
for(let j = -this.width; j <= this.width; j++) {
shadows.push(`${i*1}px ${j*1}px 0 ${color}`)
}
}
this.styles = shadows.join(',')
}
}
})
html:
<p><strong>text-shadow:</strong> {{styles}}</p>
text-shadow:
1px 1px 2px black,
1px -1px 2px black,
-1px 1px 2px black,
-1px -1px 2px black;
使用 Less 混合的笔画字体字符
这是生成笔画的 LESS 混合：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）
我创建了这里提到的所有解决方案的比较，以便快速概览：
<h1>with mixin</h1>
<h2>with text-shadow</h2>
<h3>with css text-stroke-width</h3>
https://codepen.io/Grienauer/pen/GRRdRJr
我曾经尝试过用 css3 做那些圆角和阴影。后来，我发现它的支持仍然很差（当然是 Internet Explorer！）
我最终尝试在 JS（带有 IE Canvas 的 HTML 画布）中做到这一点，但它对性能的影响很大（即使在我的 C2D 机器上也是如此）。总之，如果你真的需要效果，可以考虑JS库（大部分应该可以在IE6上运行）但不要因为性能问题而过度使用；如果您仍然需要替代方案...您可以使用 SFiR，然后 PS 它和 SFiR 它。 CSS3 今天还没有准备好。
DRAWING LETTERS AS OUTLINES部分下）