CSS-Schriftartenrand?

Ist -webkites jetzt mit all den neuen CSS3-Rahmenelementen ( , ...) möglich, Ihrer Schriftart einen Rahmen hinzuzufügen? (Wie der feste weiße Rand um das blaue Twitter-Logo). Wenn nicht, gibt es nicht allzu hässliche Hacks, die dies in CSS / XHTML erreichen, oder muss ich Photoshop trotzdem starten?

Es gibt eine experimentelle CSS-Eigenschaft namens Text-Stroke , die in einigen Browsern hinter einem Webkit-Präfix unterstützt wird .

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

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

Ein weiterer möglicher Trick wäre die Verwendung von vier Schatten mit jeweils einem Pixel in alle Richtungen unter Verwendung der Eigenschaft 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>

Bei einer Dicke von mehr als 1 Pixel würde es jedoch unscharf werden.

AKTUALISIEREN

Hier ist ein SCSS-Mixin zum Generieren des Strichs: 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);
}

JA alte Frage .. mit akzeptierten (und guten) Antworten ..

ABER ... Für den Fall, dass jemand dies jemals braucht und es hasst, Code einzugeben ...

Dies ist ein 2px schwarzer Rand mit CrossBrowser-Unterstützung (nicht IE). Ich brauchte diesen für @ fontface-Schriftarten, also musste er sauberer sein als die zuvor gesehenen Antworten. Ich nehme jede Seite pixelweise, um sicherzustellen, dass (fast) keine Lücken für " Fuzzy "(handgezeichnete oder ähnliche) Schriftarten. Subpixel (0.5px) könnten hinzugefügt werden, aber ich brauche es nicht.

Langer Code nur für die Grenze ??? ...JA!!!

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;

Sie könnten vielleicht einen Textstrich emulieren , indem Sie das CSS text-shadow(oder -webkit-text-shadow/ -moz-text-shadow) und eine sehr geringe Unschärfe verwenden:

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

Obwohl dies weiter verbreitet ist als die -webkit-text-strokeEigenschaft, bezweifle ich, dass es für die Mehrheit Ihrer Benutzer verfügbar ist, aber das ist möglicherweise kein Problem (anmutige Verschlechterung und all das).

Um mehr über einige Antworten zu erfahren, die -webkit-text-Stroke erwähnt haben, ist hier der Code, damit es funktioniert:

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

Eine eingehende Artikel über Text Hub verwendet , ist hier und eine Liste der Browser , dass die Unterstützung Text Schlaganfall ist hier .

Es scheint eine 'Text-Strich'-Eigenschaft zu geben, aber (zumindest für mich) funktioniert sie nur in Safari.

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

Folgendes verwende ich:

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

Strichschrift mit weniger Mixin

Hier ist ein WENIGER Mixin, um den Strich zu generieren: 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;
}

(Es basiert auf einer Pixelass-Antwort, die stattdessen SCSS verwendet.)

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

Ich habe einen Vergleich aller hier genannten Lösungen erstellt, um einen schnellen Überblick zu erhalten:

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

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

Ich habe einmal versucht, diese runden Ecken und Schatten mit CSS3 zu machen. Später stellte ich fest, dass es immer noch schlecht unterstützt wird (Internet Explorer (s) natürlich!).

Am Ende habe ich versucht, dies in JS (HTML-Canvas mit IE Canvas) zu tun, aber es wirkt sich stark auf die Leistung aus (sogar auf meinem C2D-Computer). Kurz gesagt, wenn Sie den Effekt wirklich benötigen, sollten Sie JS-Bibliotheken in Betracht ziehen (die meisten sollten unter IE6 ausgeführt werden können), aber aufgrund von Leistungsproblemen nicht zu viel tun. Wenn Sie noch eine Alternative benötigen ... können Sie SFiR verwenden, dann PS it und SFiR it. CSS3 ist heute noch nicht fertig.

Es tut mir leid, dass ich zu spät komme, aber wenn ich über Textschatten spreche, dachte ich, dass Ihnen dieses Beispiel auch gefallen würde (ich verwende es ziemlich oft, wenn ich gute Schatten auf Text benötige):

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