CSS-Schriftgrenze?

Mit all den neuen CSS3 Border Sachen ( -webkit , …) ist es jetzt möglich, einen Rahmen zu Ihrer Schriftart hinzuzufügen? (Wie der feste weiße Rand um das blaue Twitter-Logo). Wenn nicht, gibt es irgendwelche nicht allzu hässlichen Hacks, die dies in CSS / XHTML erreichen, oder muss ich Photoshop noch starten?

Die richtige Antwort ist:

 h1 { color: yellow; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; } 
 

Hello World

AKTUALISIEREN

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

Bildbeschreibung hier eingeben

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

ABER … Falls jemand das jemals braucht und es hasst Code zu tippen …

THIS ist ein 2px schwarzer Rahmen mit CrossBrowser-Unterstützung (nicht IE) Ich brauchte das für @fontface-fonts, also musste es sauberer sein als vorher gesehene Antworten … Ich nehme jede Seite pixelweise um sicherzustellen, dass es (fast) keine Lücken für ” Fuzzy “(Handrawn oder ähnliche) fonts. Subpixel (0.5px) könnten hinzugefügt werden, aber ich brauche es nicht.

Langer Code für nur 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 Text-Stroke emulieren , indem Sie den css text-shadow (oder -webkit-text-shadow / -moz-text-shadow ) und eine sehr niedrige 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; } 

Aber obwohl dies breiter verfügbar ist als die -webkit-text-stroke , bezweifle ich, dass es für die Mehrheit Ihrer Benutzer verfügbar ist, aber das ist möglicherweise kein Problem (graceful degradation, und all das).

Um mehr über einige Antworten zu erfahren, die -webkit-text-stroke erwähnt haben, hier ist der Code, um es funktionieren zu lassen:

 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 Text-Stroke ist hier und eine Liste von Browsern, die Text-Stroke unterstützen, ist hier .

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

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

Hier ist, was ich benutze:

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

Stroke Font-Charakter mit einem Less Mixin

Hier ist ein WENIGER Mix, um den Strich zu erzeugen: 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 pixelas 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 einmal versucht, diese runden Ecken zu machen und mit css3 Schatten zu casting. Später fand ich heraus, dass es immer noch schlecht unterstützt wird (natürlich Internet Explorer (s)!)

Ich habe versucht, dies in JS (HTML-Canvas mit IE Canvas) zu tun, aber es beeinflusst die performance sehr (sogar auf meiner C2D-Maschine). Kurz gesagt, wenn Sie den Effekt wirklich brauchen, sollten Sie JS-Bibliotheken in Betracht ziehen (die meisten von ihnen sollten in der Lage sein, auf IE6 zu laufen), aber tun Sie es wegen performancesproblemen nicht über; Wenn du noch eine Alternative brauchst … könntest du SFiR benutzen, dann PS it und SFiR es. CSS3 ist heute nicht bereit.