Obramowanie czcionki CSS?

491

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?

Lars Tackmann
źródło

Odpowiedzi:

1004

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.

Narcélio Filho
źródło
4
to działało dla mnie poprawnie, dodałem tylko 1px „blur”: text-shadow: -1px 0 1px black, 0 1px 1px black, 1px 0 1px black, 0 -1px 1px black
Jakub M.
84
świetnie, jeśli potrzebujesz tylko granicy 1px. Ale robi się brzydki, gdy używasz 2px lub więcej.
Jules Colle,
2
Uwaga: w przeglądarce Andriod występuje błąd ( code.google.com/p/android/issues/detail?id=7531 ), jeśli ustawisz „rozmycie” na 0px, wówczas nie będzie żadnego konturu.
Mark Rhodes
1
btw, możesz znaleźć ten kod na stronie ze wskazówkami W3C CSS w3.org/Style/Examples/007/text-shadow.en.html (pod DRAWING LETTERS AS OUTLINESczęścią)
luiges90
Uważam, że działa najlepiej na kolorowym tle, a odpowiedź @ pixelass najlepiej działa na tle obrazu
SemanticZen
151

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

wprowadź opis zdjęcia tutaj

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;

źródło
zaktualizowałem kod z powodu duplikatu 0 2px 0 # 000 i jego elementów - / +. Rozmycie (0 przed # 000) może być usunięte, ale zwykle go utrzymuję, nawet jeśli wynosi 0. Powinienem również zauważyć, że zaleca się, aby mieć zminimalizowaną lub skompresowaną wersję kodu CSS na stronach produkcyjnych i zachować skomentowaną nieskompresowaną wersję dla redagowanie. Powyższy kod jest dobrym przykładem, dlaczego kod CSS powinien zostać zminimalizowany, ale do edycji należy go rozdzielić wiersz po wierszu.
Bawiłem się z właściwością „-webkit-text-stroke” (głównie po to, aby czcionki wyglądały ładniej w oknach UGLY UGLY). Jednak to spowodowało, że czasy ładowania były zbyt długie, a nawet zawiesiły moją stronę (Mac Chrome 16). Więc usunąłem go szybciej niż strona mogłaby się wczytać. Myślę, że jest to przeznaczone tylko dla pojedynczych wierszy czcionek. (
1
Czy przeprowadziłeś już jakieś testy porównawcze wydajności? Znalazłem cień tekstu, który przesuwa się po stronie podczas przewijania, na przykład
Chris Bosco
1
Uważam, że działa najlepiej na tle obrazu, a odpowiedź @ Narcélio Filho najlepiej działa na kolorowym tle
SemanticZen
1
oryginalny codepen „zniknął”, więc stworzyłem nowy z oryginalnym kodem z tego postu, a także porównałem inne rozwiązania wymienione tutaj codepen.io/Grienauer/pen/GRRdRJr
Grienauer
51

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).

David mówi, że przywraca Monikę
źródło
3
Należy zauważyć, że można całkowicie pominąć trzeci argument, aby w ogóle nie było rozmycia.
François Feugeas
23

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 .

Ugtemlhrshrwzf
źródło
11

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;
}
rAthus
źródło
2

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)

Christian Toffolo
źródło
1
text-shadow:
    1px  1px 2px black,
    1px -1px 2px black,
   -1px  1px 2px black,
   -1px -1px 2px black;
użytkownik2987790
źródło
0

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.

Xandy
źródło
0

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;
}
Alex Tudor
źródło