CSS Font Border?

ด้วย CSS3 border สิ่งใหม่ที่เกิดขึ้น ( -webkit, ... ) ตอนนี้เป็นไปได้หรือไม่ที่จะเพิ่มเส้นขอบให้กับแบบอักษรของคุณ? (เช่นเดียวกับเส้นขอบสีขาวทึบรอบโลโก้ Twitter สีน้ำเงิน) ถ้าไม่มีมีแฮ็คที่ไม่น่าเกลียดเกินไปที่จะทำสิ่งนี้ใน CSS / XHTML หรือฉันยังต้องเปิดไฟ Photoshop หรือไม่?

มีคุณสมบัติ CSS ทดลองที่เรียกว่าเป็นข้อความจังหวะ , การสนับสนุนบนเบราว์เซอร์บางหลังคำนำหน้า -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 พิกเซล

UPDATE

นี่คือมิกซ์ 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);
}

ใช่คำถามเก่า .. พร้อมคำตอบที่ยอมรับ (และดี) ..

แต่ ... ในกรณีที่ทุกคนต้องการและเกลียดการพิมพ์รหัส ...

นี่เป็นขอบสีดำขนาด 2px พร้อมการสนับสนุน CrossBrowser (ไม่ใช่ IE) ฉันต้องการสิ่งนี้สำหรับแบบอักษร @fontface ดังนั้นมันจึงต้องสะอาดกว่าคำตอบที่เห็นก่อนหน้านี้ ... ฉันใช้ทุก ๆ ด้านเพื่อให้แน่ใจว่ามีช่องว่าง (เกือบ) ฟัซซี่ "(วาดด้วยมือหรือคล้ายกัน) แบบอักษร สามารถเพิ่ม Subpixels (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;

คุณอาจเลียนแบบการลากข้อความโดยใช้ 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คุณสมบัติฉันสงสัยว่ามันพร้อมใช้งานสำหรับผู้ใช้ส่วนใหญ่ของคุณ แต่นั่นอาจไม่เป็นปัญหา

เพื่ออธิบายรายละเอียดเพิ่มเติมเกี่ยวกับคำตอบบางอย่างที่ได้กล่าวถึง -webkit-text-stroke นี่คือโค้ดที่จะทำให้มันทำงาน:

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

บทความในเชิงลึกเกี่ยวกับการใช้จังหวะข้อความที่นี่และรายชื่อของเบราว์เซอร์ที่สนับสนุนจังหวะข้อความที่นี่

ดูเหมือนว่าจะมีคุณสมบัติ 'การส่งข้อความเป็นจังหวะ' แต่ (อย่างน้อยสำหรับฉัน) มันใช้ได้เฉพาะใน Safari

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

นี่คือสิ่งที่ฉันใช้:

.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 แทน)

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

ฉันสร้างการเปรียบเทียบโซลูชันทั้งหมดที่กล่าวถึงที่นี่เพื่อให้มีภาพรวมอย่างรวดเร็ว:

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

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

ฉันเคยลองทำมุมรอบเหล่านั้นและวางเงาด้วย css3 ต่อมาฉันพบว่ายังรองรับได้ไม่ดี (แน่นอน! Internet Explorer)

ฉันลงเอยด้วยการพยายามทำเช่นนั้นใน JS (ผ้าใบ HTML กับ IE Canvas) แต่มันส่งผลกระทบต่อประสิทธิภาพเป็นอย่างมาก (แม้ในเครื่อง C2D ของฉัน) ในระยะสั้นหากคุณต้องการผลกระทบจริงๆให้พิจารณาไลบรารี JS (ส่วนใหญ่ควรจะสามารถทำงานบน IE6 ได้) แต่อย่าทำมากเกินไปเนื่องจากปัญหาด้านประสิทธิภาพ หากคุณยังต้องการทางเลือก ... คุณสามารถใช้ SFiR ได้จากนั้นใช้ PS และ SFiR CSS3 ไม่พร้อมในวันนี้

ขออภัยฉันช้า แต่พูดถึง 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;
}