CSS字体边框？


CSS Font Border?

随着所有新的CSS3边框内容(-webkit，...)，现在可以为您的字体添加边框吗？ (就像蓝色Twitter徽标周围的白色边框一样)。 如果没有，是否有任何不太难看的黑客可以在CSS / XHTML中实现这一点，还是我还需要启动Photoshop？

正确的答案是：

1
2
3
4
h1 {
    color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
1
Hello World

这将从四个边设置四个相同类型的阴影。

相关讨论

UPDATE

这是一个生成笔画的SCSS mixin：http：//codepen.io/pixelass/pen/gbGZYL

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/// 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);
}

enter image description here

是老问题..接受(和好)答案..

但是......如果有人需要这个并且不喜欢打字代码......

这是一个2px黑色边框，支持CrossBrowser(不是IE)
我需要这个@fontface字体，所以它需要比以前看到的答案更干净...
我逐个像素地取每一边以确保(几乎)没有"模糊"(手绘或类似)字体的间隙。
可以添加子像素(0.5像素)，但我不需要它。

只有边框的长代码??? ...是！！！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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)和非常低的模糊来模拟文本笔划：

1
2
3
4
5
6
#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属性更广泛，但我怀疑它可供大多数用户使用，但这可能不是问题(优雅降级，以及所有这些)。

相关讨论

要详细说明一些已经提到过-webkit-text-stroke的答案，这里是让它工作的代码：

1
2
3
4
5
div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 2.00px;
}

这里有一篇关于使用文本笔划的深入文章，这里有一个支持文本笔划的浏览器列表。

似乎有一个'文字描边'属性，但(至少对我来说)它只适用于Safari。

Introducing Text-Stroke

相关讨论

这是我正在使用的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.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的笔划字体字符

这是一个产生中风的LESS mixin：http：//codepen.io/anon/pen/BNYGBy？editors = 110

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/// 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)

1
2
3
4
5
text-shadow:
    1px  1px 2px black,
    1px -1px 2px black,
   -1px  1px 2px black,
   -1px -1px 2px black;

我曾经尝试用css3做那些圆角和阴影。后来，我发现它仍然支持不足(当然是Internet Explorer(s)！)

我最终试图在JS(使用IE Canvas的HTML画布)中做到这一点，但它会影响性能很多(甚至在我的C2D机器上)。简而言之，如果你真的需要这种效果，可以考虑使用JS库(大多数应该能够在IE6上运行)，但是由于性能问题，不要过度使用它们。如果你仍然需要一个替代...你可以使用SFiR，然后PS它和SFiR它。 CSS3今天还没有准备好。