CSS 字体边框？

问题描述 投票：0回答：13

随着所有新的 CSS3 边框内容的出现（

-webkit
，...）现在可以为字体添加边框吗？ （就像蓝色 Twitter 徽标周围的纯白色边框一样）。如果没有，是否有任何不太丑陋的黑客可以在 CSS/XHTML 中实现此目的，或者我仍然需要启动 Photoshop？

css fonts
13个回答
1206
投票

有一个实验性 CSS 属性，称为 text-lines，在 -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 个像素的厚度就会变得模糊。

    



    

    
    
    

    

        

            

                

                    
186
投票

                    
                

            

        

        
更新



这是一个用于生成笔画的 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 黑色边框，支持跨浏览器（不是 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;

    



    

    
    
    

    

        

            

                

                    
60
投票

                    
                

            

        

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

    



    

    
    
    

    

        

            

                

                    
30
投票

                    
                

            

        

        
为了详细说明提到 -webkit-text-lines 的一些答案，这里是使其工作的代码：



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



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



    

    
    
    

    

        

            

                

                    
19
投票

                    
                

            

        

        
似乎有一个“文本笔触”属性，但（至少对我来说）它只适用于 Safari。



http://webkit.org/blog/85/introducing-text-中风/
    



    

    
    
    

    

        

            

                

                    
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
投票

                    
                

            

        

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

    



    

    
    
    

    

        

            

                

                    
3
投票

                    
                

            

        

        
我对此处提到的所有解决方案进行了比较，以便快速概览：



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



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



    

    
    
    

    

        

            

                

                    
3
投票

                    
                

            

        

        
由于 
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

以防万一 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>

    



    

    
    
    

    

        

            

                

                    
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）

    



    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

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



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

    



    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        




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

    paint-order: stroke fill;  /* <-- add this for ticker text stroke  */

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





    

	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.