Obramowanie czcionki CSS?

Czy przy wszystkich nowych funkcjach obramowania CSS3 ( -webkit, ...) można teraz dodać obramowanie do czcionki? (Jak jednolita biała ramka wokół niebieskiego logo na Twitterze). Jeśli nie, czy są jakieś niezbyt brzydkie hacki, które dokonają tego w CSS / XHTML, czy nadal muszę uruchamiać Photoshopa?

Istnieje eksperymentalna właściwość CSS o nazwie text-stroke , obsługiwana w niektórych przeglądarkach za prefiksem -webkit .

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

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

Inną możliwą sztuczką byłoby użycie czterech cieni, po jednym pikselu we wszystkich kierunkach, przy użyciu właściwości 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>

Ale rozmazałby się przy grubości większej niż 1 piksel.

AKTUALIZACJA

Oto mieszanka SCSS do generowania obrysu: 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);
}

TAK stare pytanie .. z zaakceptowanymi (i dobrymi) odpowiedziami ..

ALE ... Na wypadek, gdyby ktoś kiedykolwiek tego potrzebował i nie znosił pisania kodu ...

TO jest czarna ramka 2px z obsługą CrossBrowser (nie IE) Potrzebowałem tego dla czcionek @fontface, więc musiałem być czystszy niż poprzednie odpowiedzi ... Biorę piksel z każdej strony, aby upewnić się, że nie ma (prawie) żadnych przerw dla „ fuzzy "(handrawn lub podobne) czcionki. Można dodawać subpiksele (0,5 piksela), ale nie potrzebuję tego.

Długi kod dla samej granicy? ...TAK!!!

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;

Być może możesz naśladować obrys tekstu, używając css text-shadow(lub -webkit-text-shadow/ -moz-text-shadow) i bardzo niskiego rozmycia:

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

Ale chociaż jest to szerzej dostępne niż -webkit-text-strokewłasność, wątpię, aby było dostępne dla większości twoich użytkowników, ale może to nie stanowić problemu (pełna wdzięku degradacja i tak dalej).

Aby rozwinąć więcej na temat niektórych odpowiedzi, które wspominały o -webkit-text-stroke, oto kod umożliwiający jego działanie:

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

Artykuł pogłębione o użyciu tekstu udaru jest tutaj oraz listę przeglądarek tekst wsparcie skok jest tutaj .

Wydaje się, że istnieje właściwość „obrysu tekstu”, ale (przynajmniej dla mnie) działa ona tylko w Safari.

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

Oto, czego używam:

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

Obrysuj czcionkę czcionką Less mixin

Oto MNIEJ mieszanka do wygenerowania obrysu: 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;
}

(jest oparty na odpowiedzi pixelass, która zamiast tego używa SCSS)

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

Stworzyłem porównanie wszystkich wymienionych tutaj rozwiązań, aby uzyskać szybki przegląd:

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

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

Kiedyś próbowałem robić te okrągłe rogi i rzucać cienie za pomocą css3. Później okazało się, że jest nadal słabo obsługiwany (oczywiście Internet Explorer (y)!)

Ostatecznie próbowałem to zrobić w JS (HTML Canvas z IE Canvas), ale ma to duży wpływ na wydajność (nawet na moim komputerze C2D). Krótko mówiąc, jeśli naprawdę potrzebujesz efektu, zastanów się nad bibliotekami JS (większość z nich powinna być w stanie działać na IE6), ale nie przesadzaj z powodu problemów z wydajnością; jeśli nadal potrzebujesz alternatywy ... możesz użyć SFiR, a następnie PS it i SFiR it. CSS3 nie jest dziś gotowy.

Przepraszam za spóźnienie, ale mówiąc o cieniu tekstu, pomyślałem, że spodoba ci się również ten przykład (używam go dość często, gdy potrzebuję dobrych cieni do tekstu):

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