随着所有新的CSS3边框的出现(-webkit，…)，现在可以在你的字体中添加边框了吗?(比如Twitter蓝色logo周围的白色边框)。如果没有，是否有一些不太丑陋的黑客可以在CSS/XHTML中完成这个任务，或者我仍然需要启动Photoshop?
当前回答
更新
下面是一个生成笔画的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-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-text-stroke的一些答案，下面是使其工作的代码:
div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 2.00px;
}
这里有一篇关于使用文本笔画的深入文章，这里有一个支持文本笔画的浏览器列表。
更新
下面是一个生成笔画的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;
有一个实验性的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个像素，它就会变得模糊。
这是我正在使用的:
.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;
}
