logo标签列表

CSS字体边框？

cssfonts
601

随着所有新的CSS3边框的出现（-webkit, ...），现在是否可以为字体添加边框？（就像蓝色Twitter徽标周围的纯白边框）。如果不行，是否有任何不太丑陋的CSS / XHTML黑科技可以实现这一点，或者我仍然需要启动Photoshop来完成？

12个回答
1192

有一种实验性的CSS属性称为text-stroke，在一些浏览器上需要使用-webkit前缀才能支持。

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个像素的厚度，它会变得模糊。

5
这对我非常有效，我只添加了1px的模糊效果："blur":text-shadow: -1px 0 1px black, 0 1px 1px black, 1px 0 1px black, 0 -1px 1px black。 - Jakub M.
93
如果你只需要1像素的边框，那么很棒。但是当使用2像素或更多时，就变得很丑陋了。 - Jules Colle
2
注意：Andriod浏览器存在一个错误（http://code.google.com/p/android/issues/detail?id=7531），如果将“模糊”设置为0像素，则根本不会出现轮廓。 - Mark Rhodes
1
顺便提一下，您可以在W3C CSS提示页面上找到此代码http://www.w3.org/Style/Examples/007/text-shadow.en.html（在“绘制字母轮廓”部分下）。 - luiges90
实际上正在发生什么？ - user5306470
显示剩余5条评论
184

更新

这是一个生成描边的 SCSS 混合器：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);
}

enter image description here

是的，这是一个老问题..有被接受的（而且不错）答案..

但是...以防万一有人需要它并且讨厌打代码...

这是一个带有跨浏览器支持（不包括IE）的2像素黑色边框。 我需要这个来处理@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”属性（主要是为了让字体在丑陋的Windows上看起来更好看）。但这使得加载时间变得太长，甚至导致我的网站崩溃（Mac Chrome 16）。所以我比页面加载得更快就把它移除了。我想这只适用于单行字体。（我当时是在“body”中使用它） - user950658
1
你有对这个进行过性能基准测试吗？例如，我发现在滚动时，文本阴影会拖慢页面。 - Chris Bosco
1
我发现这在图像背景上效果最佳，@Narcélio Filho的答案在彩色背景上效果最佳。 - SemanticZen
如果您提供的单位是视口相对单位而不是像素，则此功能似乎无法按预期工作。 - Muhammad Abdul-Rahim
3
原始的 CodePen “消失”了，因此我使用了这篇文章中的原始代码创建了一个新的 CodePen，并对其他在这里提到的解决方案进行了比较。https://codepen.io/Grienauer/pen/GRRdRJr - Grienauer
显示剩余2条评论
59

您可以使用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属性更普遍，但我怀疑大多数用户是否都可以使用，但这可能不是问题（优雅降级等）。

6
需要注意的是，完全可以省略第三个参数，以便完全不产生模糊。 - François Feugeas
30

更详细地说明一些提到了-webkit-text-stroke的答案，这里是让它起作用的代码：

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

一篇关于如何使用文本描边的深度文章在这里，支持文本描边的浏览器列表在这里。

18
17

这是我正在使用的内容：

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

抱歉我来晚了，但是说到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;
3

由于对我来说webkit似乎存在问题，我对答案不满意。后来我发现了这个代码笔，它可以为你生成原始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

以防Codepen被删除（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>
3
text-shadow:
    1px  1px 2px black,
    1px -1px 2px black,
   -1px  1px 2px black,
   -1px -1px 2px black;
2

使用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)

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接