CSS字体边框？

Question

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

Answer 1

有一个名为 text-stroke、supported on some browsers behind a -webkit prefix 的实验性 CSS 属性。

h1 {
    -webkit-text-stroke: 2px black; /* width and color */

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

另一个可能的技巧是使用四个阴影，每个方向上一个像素，使用属性text-shadow：

h1 {
    /* 1 pixel black shadow to left, top, right and bottom */
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

但是超过 1 个像素的厚度会变得模糊。

Answer 2

更新

这是一个用于生成笔画的 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;

Answer 3

您也许可以模拟一个文本笔划，使用 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 属性更广泛可用，但我怀疑它是否适用于大多数用户，但这可能不是问题（优雅降级等等）。

Answer 4

要详细说明一些提到 -webkit-text-stroke 的答案，以下是使其工作的代码：

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 2.00px; 
}

关于使用文本描边的深入文章是here，支持文本描边的浏览器列表是here。

Answer 5

似乎有一个“text-stroke”属性，但（至少对我而言）它只适用于 Safari。

http://webkit.org/blog/85/introducing-text-stroke/

Answer 6

这是我正在使用的：

.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;
}

Answer 7

对不起，我迟到了，但谈到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;

Answer 8

text-shadow:
    1px  1px 2px black,
    1px -1px 2px black,
   -1px  1px 2px black,
   -1px -1px 2px black;

Answer 9

使用 Less 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）

Answer 10

我比较了这里提到的所有解决方案，以便快速了解：

<h1>with mixin</h1>
<h2>with text-shadow</h2>
<h3>with css text-stroke-width</h3>

https://codepen.io/Grienauer/pen/GRRdRJr

Answer 11

因为webkit 似乎对我来说是个问题，所以我对答案并不满意。然后我找到了这个codepen，它可以为你生成raw CSS。只需在 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

以防万一密码笔被删除 (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>

Answer 12

我曾经尝试用 css3 做那些圆角和阴影。后来，我发现它的支持仍然很差（当然是 Internet Explorer！）

我最终尝试在 JS（带有 IE Canvas 的 HTML 画布）中执行此操作，但它对性能的影响很大（即使在我的 C2D 机器上也是如此）。总之，如果你真的需要效果，可以考虑JS库（大部分应该可以在IE6上运行）但不要因为性能问题而过度使用；如果您仍然需要替代方案...您可以使用 SFiR，然后 PS 它和 SFiR 它。 CSS3 今天还没有准备好。