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

Strichschrift-Zeichen mit Less-Mixin

Hier ist ein LESS-Mixin, 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 der Pixelass-Antwort, die stattdessen SCSS verwendet)

Answer 2

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

Ich habe schließlich versucht, das in JS (HTML-Canvas mit IE Canvas) zu tun, aber es wirkt sich auf die Leistung eine Menge (auch auf meinem C2D Maschine). Kurz gesagt, wenn Sie wirklich den Effekt benötigen, betrachten Sie JS-Bibliotheken (die meisten von ihnen sollten in der Lage sein, auf IE6 laufen), aber nicht über tun es aufgrund von Leistungsproblemen; wenn Sie noch eine Alternative benötigen ... Sie könnten SFiR verwenden, dann PS es und SFiR es. CSS3 ist heute noch nicht fertig.