CSS字体边框?

随着所有新的CSS3边界的东西(-webkit，…)现在是否可以添加一个边界到你的字体?(比如Twitter蓝色logo周围的白色边框)。如果没有，是否有一些不太丑陋的黑客可以在CSS/XHTML中完成这个任务，或者我仍然需要启动Photoshop?

1034213 次浏览
小开

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

我最终尝试在JS (HTML canvas与IE canvas)中做到这一点，但它对性能影响很大(甚至在我的C2D机器上)。简而言之，如果你真的需要这种效果，考虑JS库(它们中的大多数应该能够在IE6上运行)，但不要因为性能问题而过度使用;如果你还需要其他选择……你可以使用SFiR，然后PS它和SFiR它。CSS3今天还没有准备好。

小开

似乎有一个“文本描边”属性，但(至少对我来说)它只在Safari中有效。

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

小开

你也许可以用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属性更广泛地可用，但我怀疑它是否对大多数用户可用，但这可能不是问题(优雅降级，等等)。

小开
最佳答案

有一个实验性的CSS属性叫做text-stroke， 某些浏览器支持-webkit前缀。

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


font-family: sans; color: yellow;
}
<h1>Hello World</h1>

Another possible trick would be to use four shadows, one pixel each on all directions, using 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>

But it would get blurred for more than 1 pixel thickness.

小开

更新

下面是生成笔画的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);
}

enter image description here

是的，老问题。有公认的(好的)答案。

但是…以防有人需要这个并且讨厌输入代码……

这是一个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;
小开

为了详细说明已经提到的-webkit-text-stroke的一些答案，下面是使其工作的代码:

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

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

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

这是我正在使用的:

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

笔画字体字符与较少的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)

小开

我将这里提到的所有解决方案进行了比较，以便快速概述:

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

< a href = " https://codepen。io/Grienauer/pen/GRRdRJr" rel="nofollow noreferrer">https://codepen.io/Grienauer/pen/GRRdRJr

小开

抱歉我迟到了，但说到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;
小开

由于webkit似乎对我来说是bug，我对答案并不满意。然后我找到了这个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>

提交答案