CSS Font Border?

Question

Mit dem ganzen neuen CSS3-Rahmen-Zeug, das im Umlauf ist ( -webkit ...) ist es jetzt möglich, der Schrift einen Rahmen hinzuzufügen (wie den durchgehenden weißen Rahmen um das blaue Twitter-Logo). Wenn nicht, gibt es irgendwelche nicht allzu hässlichen Hacks, mit denen man das in CSS/XHTML erreichen kann, oder muss ich immer noch Photoshop anwerfen?

Answer 1

Es gibt eine experimentelle CSS-Eigenschaft namens text-stroke , unterstützt auf einigen Browsern hinter einem -webkit-Präfix .

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, jeweils ein Pixel in alle Richtungen, mit 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.

Answer 2

UPDATE

Hier ist ein SCSS-Mixin, um den Strich zu erzeugen: 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... Falls jemand das mal braucht und es hasst, Code zu tippen...

THIS ist ein 2px schwarzer Rand mit CrossBrowser-Unterstützung (nicht IE) Ich brauchte dies für @fontface-Schriften, also musste es sauberer sein als die vorher gesehenen Antworten... Ich nehme jede Seite pixelweise, um sicherzustellen, dass es (fast) keine Lücken für "unscharfe" (handgezeichnete oder ähnliche) Schriftarten gibt. Subpixel (0.5px) könnten hinzugefügt werden, aber ich brauche sie 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;

Answer 3

Sie könnten vielleicht nachbilden. einen Text-Strich, unter Verwendung der css text-shadow (oder -webkit-text-shadow / -moz-text-shadow ) und eine sehr geringe Unschärfe:

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

Dies ist zwar in größerem Umfang verfügbar als die -webkit-text-stroke Ich bezweifle, dass die Mehrheit Ihrer Benutzer diese Funktion nutzen kann, aber das ist vielleicht kein Problem (graceful degradation und so).

Answer 4

Um mehr auf einige Antworten einzugehen, die -webkit-text-stroke erwähnt haben, hier ist der Code, damit es funktioniert:

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

Ein ausführlicher Artikel über die Verwendung von Textstrichen ist aquí und eine Liste von Browsern, die Textstriche unterstützen, lautet aquí .

Answer 5

Es scheint eine Eigenschaft "text-stroke" zu geben, aber (zumindest bei mir) funktioniert sie nur in Safari.

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