随着所有新的CSS3边框的出现(-webkit,…),现在可以在你的字体中添加边框了吗?(比如Twitter蓝色logo周围的白色边框)。如果没有,是否有一些不太丑陋的黑客可以在CSS/XHTML中完成这个任务,或者我仍然需要启动Photoshop?
当前回答
这是我正在使用的:
.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;
}
其他回答
我曾经尝试用css3做那些圆角和阴影。后来,我发现它的支持仍然很差(当然是Internet Explorer !)
我最终尝试在JS (HTML canvas与IE canvas)中做到这一点,但它对性能影响很大(甚至在我的C2D机器上)。简而言之,如果你真的需要这种效果,考虑JS库(它们中的大多数应该能够在IE6上运行),但不要因为性能问题而过度使用;如果你还需要其他选择……你可以使用SFiR,然后PS它和SFiR它。CSS3今天还没有准备好。
似乎有一个“文本描边”属性,但(至少对我来说)它只在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;
为了详细说明已经提到的-webkit-text-stroke的一些答案,下面是使其工作的代码:
div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 2.00px;
}
这里有一篇关于使用文本笔画的深入文章,这里有一个支持文本笔画的浏览器列表。
text-shadow:
1px 1px 2px black,
1px -1px 2px black,
-1px 1px 2px black,
-1px -1px 2px black;