Textrand mit CSS (Rand um Text)

Gibt es eine Möglichkeit, einen Rahmen um Text wie das folgende Bild zu integrieren?

Verwenden Sie mehrere Textschatten:

text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

<h1>test</h1>

Alternativ können Sie einen Textstrich verwenden, der nur im Webkit funktioniert:

-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;

body {
  font-family: sans-serif;
  background: #222;
  color: darkred;
  }
h1 {
  -webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #fff;
}

<h1>test</h1>

Auch lesen Sie mehr als CSS-Tricks.

Sicher. Sie könnten CSS3 verwenden text-shadow:

text-shadow: 0 0 2px #fff;

Es wird jedoch nicht sofort in allen Browsern angezeigt. Die Verwendung einer Skriptbibliothek wie Modernizr hilft jedoch dabei, sie in den meisten Browsern richtig zu machen.

Ich mag nicht so viele Lösungen, die auf dem Multiplizieren von Textschatten basieren. Es ist nicht wirklich flexibel. Es funktioniert möglicherweise für einen 2-Pixel-Strich, bei dem die hinzuzufügenden Richtungen 8 sind, aber mit nur 3 Pixel wurden die Strichrichtungen 16 und so weiter. Nicht wirklich bequem zu verwalten.

Das richtige Tool ist vorhanden, es ist SVG. <text> Das Support-Problem des Browsers ist in diesem Fall nichts wert, da die Verwendung von Text-Shadow auch ein eigenes Support-Problem hat, filter: progid:DXImageTransformverwendet werden kann oder IE <10 ist, aber oft nicht wie erwartet funktioniert.

Für mich bleibt die beste Lösung SVG mit einem Fallback in nicht gestrichenem Text für ältere Browser:

Diese Art von Ansatz funktioniert praktisch auf allen Versionen von Chrome und Firefox, Safari seit Version 3.04, Opera 8, IE 9

Im Vergleich zu den folgenden text-shadowUnterstützungen: Chrome 4.0, FF 3.5, IE 10, Safari 4.0, Opera 9 sind die Ergebnisse noch kompatibler.

.stroke {
  margin: 0;
  font-family: arial;
  font-size:70px;
  font-weight: bold;
  }
  
  svg {
    display: block;
  }
  
  text {
    fill: black;
    stroke: red;
    stroke-width: 3;
  }

<p class="stroke">
  <svg xmlns="http://www.w3.org/2000/svg" width="700" height="72" viewBox="0 0 700 72">
    <text x="0" y="70">Stroked text</text>
  </svg>
</p>

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

Im Folgenden werden alle Browser behandelt, die es wert sind, behandelt zu werden:

text-shadow: 0 0 2px #fff; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
filter: progid:DXImageTransform.Microsoft.Glow(Color=#ffffff,Strength=1); /* IE<10 */