CSS Font Border?

UPDATE

Oto Mixin 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);
}

BUT...In gdyby ktoś tego potrzebował i nie znosił wpisywania kodu...

Jest to czarna ramka 2px z obsługą CrossBrowser (nie IE) Potrzebowałem tego dla czcionek @ fontface, więc musiało być czystsze niż poprzednie widziane odpowiedzi... Biorę każdą stronę pikselowo, aby upewnić się, że są (prawie) brak luk dla czcionek" rozmytych " (ręcznych lub podobnych). Można by dodać subpiksele (0.5 px), ale nie jest mi to potrzebne.

Długi Kod tylko 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;

Możesz być może emulować obrys tekstu, używając css text-shadow (lub -webkit-text-shadow/-moz-text-shadow) i bardzo niskie rozmycie:

#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 bardziej dostępne niż właściwość -webkit-text-stroke, wątpię, aby była dostępna dla większości twoich użytkowników, ale to może nie być problemem(pełna wdzięku degradacja i w ogóle).

Aby rozwinąć więcej na temat niektórych odpowiedzi, które zostały wymienione-webkit-text-stroke, oto kod, aby to działało:

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

Szczegółowy artykuł o używaniu obrysu tekstu znajduje się tutaj , a lista przeglądarek obsługujących obrys tekstu to tutaj .

Wydaje się, że istnieje właściwość' text-stroke', ale (przynajmniej dla mnie) działa 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;
}

Czcionka Stroke-znak z mniejszą mixin

Oto mniej mixin do generowania 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;
}

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

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

W końcu próbowałem to zrobić w JS (HTML canvas z IE Canvas), ale ma to duży wpływ na wydajność (nawet na mojej maszynie C2D). Krótko mówiąc, jeśli naprawdę potrzebujesz efektu, rozważ biblioteki JS (większość z nich powinna być w stanie działać na IE6), ale nie rób tego z powodu problemów z wydajnością; jeśli nadal potrzebujesz alternatywy... mógłbyś użyj SFiR, następnie PS it i sfir it. CSS3 nie jest jeszcze gotowy.