CSS Yazı Tipi Kenarlığı?

Tüm yeni CSS3 kenarlıkları devam ederken ( -webkit, ...) artık yazı tipinize kenarlık eklemek mümkün mü? (Mavi Twitter logosunun etrafındaki düz beyaz kenarlık gibi). Değilse, bunu CSS / XHTML'de gerçekleştirecek çok çirkin olmayan kesmek var mı yoksa hala Photoshop'u başlatmam gerekiyor mu?

Denilen deneysel CSS özelliği var metin inme , bir -webkit önek arkasında bazı tarayıcılarda desteklenir .

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

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

Bir başka olası hile, özelliği kullanarak her yöne bir piksel olmak üzere dört gölge kullanmaktır 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>

Ancak 1 piksel kalınlığından daha fazla bulanıklaşır.

GÜNCELLEME

Konturu oluşturmak için bir SCSS karışımı: 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);
}

EVET eski soru .. kabul edilmiş (ve iyi) cevaplarla ..

AMA ... Herkes buna ihtiyaç duyarsa ve kod yazmaktan nefret ederse ...

Bu CrossBrowser desteği (IE değil) ile 2px siyah bir kenarlık Ben @fontface yazı tipleri için bu yüzden gerekli gördüm daha temiz olması gerekiyordu ... Ben (neredeyse) boşluk (neredeyse) hiçbir boşluk olduğundan emin olmak için her tarafı piksel alır " bulanık "(handrawn veya benzeri) yazı tipleri. Alt pikseller (0.5px) eklenebilir, ancak buna ihtiyacım yok.

Sadece sınır için uzun kod ??? ...EVET!!!

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 (veya / ) ve çok düşük bir bulanıklık kullanarak bir metin konturunu taklit edebilirsiniz :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;
}

Ancak bu, -webkit-text-strokemülkten daha geniş bir şekilde kullanılabilir olsa da, kullanıcılarınızın çoğunda kullanılabilir olduğundan şüphe ediyorum, ancak bu bir sorun olmayabilir (zarif bozulma ve tüm bunlar).

-Webkit-text-stroke ifadesinden bahsetmiş olduğunuz bazı cevaplar hakkında daha ayrıntılı bilgi vermek için, bunu çalıştıracak kod aşağıdadır:

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

Metin konturunu kullanma hakkında ayrıntılı bir makale burada ve metin konturunu destekleyen tarayıcıların bir listesi burada .

Bir 'metin vuruş' özelliği var gibi görünüyor, ama (en azından benim için) sadece Safari'de çalışıyor.

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

İşte ne kullanıyorum:

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

Daha az mixin ile yazı tipi karakterini konturlama

İşte inme oluşturmak için daha az bir 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;
}

(bunun yerine SCSS kullanan pixelass cevabını temel alır)

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

Hızlı bir genel bakış için burada belirtilen tüm çözümlerin bir karşılaştırmasını oluşturdum:

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

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

Bir keresinde css3 ile o yuvarlak köşeleri ve gölge düşürmeye çalıştım. Daha sonra, hala zayıf bir şekilde desteklendiğini gördüm (elbette Internet Explorer (lar)!)

JS'de bunu yapmaya çalıştım (IE Canvas ile HTML tuvali), ancak performansı çok etkiledi (C2D makinemde bile). Kısacası, gerçekten etkiye ihtiyacınız varsa, JS kitaplıklarını düşünün (çoğu IE6'da çalışabilmelidir), ancak performans sorunları nedeniyle bunu yapmayın; hala bir alternatife ihtiyacınız varsa ... SFiR kullanabilirsiniz, sonra PS ve SFiR kullanabilirsiniz. CSS3 bugün hazır değil.

Üzgünüm geç kaldım, ancak metin gölgesi hakkında konuştuğumda, bu örneği de beğeneceğinizi düşündüm (metin üzerinde iyi gölgelere ihtiyaç duyduğumda sık sık kullanıyorum):

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