Phông chữ CSS?

Với tất cả các công cụ viền CSS3 mới đang diễn ra ( -webkit, ...), giờ đây có thể thêm đường viền vào phông chữ của bạn không? (Giống như đường viền màu trắng xung quanh logo Twitter màu xanh). Nếu không, có bất kỳ hack không quá xấu nào sẽ thực hiện điều này trong CSS / XHTML hay tôi vẫn cần phải kích hoạt Photoshop?

Có một thuộc tính CSS thử nghiệm được gọi là đột quỵ văn bản , được hỗ trợ trên một số trình duyệt đằng sau tiền tố -webkit .

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

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

Một mẹo có thể khác là sử dụng bốn bóng, mỗi pixel cho mỗi hướng, sử dụng thuộc tính 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>

Nhưng nó sẽ bị mờ với độ dày hơn 1 pixel.

CẬP NHẬT

Đây là một mixin SCSS để tạo đột quỵ: 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);
}

CÓ câu hỏi cũ .. với câu trả lời được chấp nhận (và tốt) ..

NHƯNG ... Trong trường hợp bất cứ ai cũng cần điều này và ghét gõ mã ...

ĐÂY là viền đen 2px có hỗ trợ CrossBrowser (không phải IE) Tôi cần điều này cho phông chữ @fontface để nó cần sạch hơn các câu trả lời đã thấy trước đó ... Tôi lấy mọi mặt theo chiều dọc để đảm bảo không có khoảng trống nào cho " phông chữ mờ "(vẽ tay hoặc tương tự). Subpixels (0,5px) có thể được thêm nhưng tôi không cần nó.

Mã dài cho chỉ biên giới ??? ...ĐÚNG!!!

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;

Bạn có thể có thể mô phỏng một nét chữ, sử dụng css text-shadow(hoặc -webkit-text-shadow/ -moz-text-shadow) và độ mờ rất thấp:

#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;
}

Nhưng mặc dù điều này có sẵn rộng rãi hơn -webkit-text-stroketài sản, tôi nghi ngờ rằng nó có sẵn cho phần lớn người dùng của bạn, nhưng đó có thể không phải là vấn đề (xuống cấp duyên dáng, và tất cả điều đó).

Để giải thích thêm về một số câu trả lời đã đề cập -webkit-text-Stro, đây là mã để làm cho nó hoạt động:

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

Một bài viết chuyên sâu về việc sử dụng đột quỵ văn bản có ở đây và một danh sách các trình duyệt hỗ trợ đột quỵ văn bản ở đây .

Dường như có một thuộc tính 'đột quỵ văn bản', nhưng (ít nhất là đối với tôi) nó chỉ hoạt động trong Safari.

http://webkit.org/blog/85/int sinhing-text-stroke /

Đây là những gì tôi đang sử dụng:

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

Phông chữ đột quỵ với ít mixin

Đây là một mixin LESS để tạo đột quỵ: 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;
}

(dựa trên câu trả lời pixelass thay vì sử dụng SCSS)

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

Tôi đã tạo một so sánh tất cả các giải pháp được đề cập ở đây để có cái nhìn tổng quan nhanh:

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

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

Tôi đã từng thử làm những góc tròn đó và thả bóng với css3. Sau này, tôi thấy nó vẫn được hỗ trợ kém (tất nhiên là Internet Explorer (s)!)

Cuối cùng tôi đã cố gắng làm điều đó trong JS (HTML canvas với IE Canvas), nhưng nó ảnh hưởng đến hiệu suất rất nhiều (ngay cả trên máy C2D của tôi). Nói tóm lại, nếu bạn thực sự cần hiệu ứng, hãy xem xét các thư viện JS (hầu hết trong số chúng sẽ có thể chạy trên IE6) nhưng đừng làm quá vì vấn đề hiệu năng; nếu bạn vẫn cần một giải pháp thay thế ... bạn có thể sử dụng SFiR, sau đó PS nó và SFiR nó. CSS3 chưa sẵn sàng ngày hôm nay.

Xin lỗi tôi đến trễ, nhưng nói về bóng văn bản, tôi nghĩ bạn cũng sẽ thích ví dụ này (tôi sử dụng nó khá thường xuyên khi tôi cần bóng tốt trên văn bản):

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