随着所有新的CSS3边框的出现(-webkit，…)，现在可以在你的字体中添加边框了吗?(比如Twitter蓝色logo周围的白色边框)。如果没有，是否有一些不太丑陋的黑客可以在CSS/XHTML中完成这个任务，或者我仍然需要启动Photoshop?
当前回答
我将这里提到的所有解决方案进行了比较，以便快速概述:
<h1>with mixin</h1>
<h2>with text-shadow</h2>
<h3>with css text-stroke-width</h3>
https://codepen.io/Grienauer/pen/GRRdRJr
其他回答
这是我正在使用的:
.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;
}
我将这里提到的所有解决方案进行了比较，以便快速概述:
<h1>with mixin</h1>
<h2>with text-shadow</h2>
<h3>with css text-stroke-width</h3>
https://codepen.io/Grienauer/pen/GRRdRJr
抱歉我迟到了，但是说到文本阴影，我想你也会喜欢这个例子(当我需要好的文本阴影时，我经常使用它):
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;
更新
下面是一个生成笔画的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;
笔画字体字符与较少的mixin
下面是一个生成笔画的LESS 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)
