CSS字体边框？

491

有了所有新的CSS3边框-webkit，现在可以在字体中添加边框了吗？（就像蓝色的Twitter徽标周围的纯白色边框一样）。如果不是，是否有任何不太丑陋的骇客会在CSS / XHTML中完成此任务，还是我仍然需要启动Photoshop？

css  fonts 
— 拉斯·塔克曼
source

Answers:

1004

有一个实验性CSS属性，称为text-stroke，在某些浏览器中受-webkit prefix支持。

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

    font-family: sans; color: yellow;
}
<h1>Hello World</h1>
展开摘要

另一个可能的技巧是使用property使用四个阴影，各个方向各一个像素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像素的厚度会变得模糊。

— NarcélioFilho
source
4
这个工作对我来说pefrectly，我只添加1px的“模糊”：文字阴影：-1px 0 1px的黑色，0 1px的1px的黑色，1px的1px的0黑色，0 -1px 1px的黑
— 的Jakub M.
84
如果只需要1px边框，那就太好了。但是当使用2px或更多像素时，它将变得很难看。
— 朱尔斯·科尔
2
注意：Andriod浏览器存在一个错误（code.google.com/p/android/issues/detail?id=7531），如果将“模糊”设置为0px，则根本不会出现轮廓。
— 马克·罗德斯
1
顺便说一句，您可以在W3C CSS提示页面w3.org/Style/Examples/007/text-shadow.en.html（DRAWING LETTERS AS OUTLINES部分）中找到此代码
— luiges90 2013年
我发现这在彩色背景上效果最佳，而@pixelass的答案在图像背景上效果最佳
— SemanticZen
151

更新

这是生成笔画的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字体使用它，因此它需要比以前看到的答案更干净。模糊”（handrawn或类似字体）字体。可以添加亚像素（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;
由于重复的0 2px 0＃000及其-/ +元素，因此更新了代码。可以消除模糊（在＃000之前为0），但是即使它为0，我也倾向于保留它。我还应注意，建议在生产站点上使用压缩或压缩的CSS版本的代码，并保留带注释的未压缩版本编辑。上面的代码是一个很好的示例，为什么要减少CSS代码，但需要一行一行地进行编辑。
我玩了'-webkit-text-stroke'属性（主要是为了使字体在UGLY UGLY窗口上看起来更好），但是这使加载时间太长，甚至使我的网站崩溃了（Mac Chrome 16）。所以我删除它的速度甚至超过了页面的加载速度。我猜这仅适用于单行字体。（我将其用于“身体”）
1
您是否为此进行了性能基准测试？例如，我发现滚动时文字阴影会使页面陷入困境
— 克里斯·博斯科
1
我发现这在图像背景上效果最好，@NarcélioFilho的答案在彩色背景上效果最好
— SemanticZen
1
原始的代码笔“消失了”，因此我使用本文中的原始代码创建了一个新代码笔
— Grienauer
51

您可能使用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属性更广泛可用，但我怀疑您的大多数用户都可以使用它，但这可能不是问题（优美的降级，以及所有这些）。

— 大卫说恢复莫妮卡
source
3
应该注意的是，为了完全不模糊，有可能完全省略第三自变量。
— 弗朗索瓦Feugeas
23

要详细说明提到-webkit-text-stroke的一些答案，下面是使它起作用的代码：

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

在深入的文章有关使用文本行程是在这里和浏览器的列表，支持文字笔画是在这里。

— Ugtemlhrshrwzf
source
11

这是我正在使用的：

.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;
}
— 心房
source
2

具有较少mixin的描边字体

这是一个较少的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;
}

（它基于使用了SCSS的pixelass答案）

— 克里斯蒂安·托佛洛
source
1 
text-shadow:
    1px  1px 2px black,
    1px -1px 2px black,
   -1px  1px 2px black,
   -1px -1px 2px black;
— 用户名
source
0

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

我最终尝试在JS（带有IE Canvas的HTML canvas）中执行此操作，但是它对性能的影响很大（即使在我的C2D机器上）。简而言之，如果您确实需要这种效果，请考虑使用JS库（它们中的大多数都应能够在IE6上运行），但是由于性能问题，请不要过度使用它。如果仍然需要替代方案，则可以使用SFiR，然后使用PS和SFiR。CSS3今天还没有准备好。

— Xandy
source
0

抱歉，我来晚了，但是谈到文本阴影，我想你也想这个例子（当我需要在文本上有良好的阴影时，我经常使用它）：

                    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;
}
— 亚历克斯·都铎
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.