it-swarm.com.de

Textrahmen mit CSS (Rahmen um Text)

Gibt es eine Möglichkeit, einen Rand um den Text zu integrieren, wie im Bild unten?

text border

92
jho1086

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;

enter image description here

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 den Textstrich verwenden, der nur in Webkit funktioniert:

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

enter image description here

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.

188
bookcasey

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

text-shadow: 0 0 2px #fff;

Es wird jedoch nicht in allen Browsern sofort angezeigt. Die Verwendung einer Skriptbibliothek wie Modernizr wird jedoch in den meisten Browsern hilfreich sein.

13
jtheman

Nachfolgend werden alle Browser behandelt, die es zu beachten gilt:

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 */
5
dtbarne
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
5
chezwhite

Ich mag nicht so viele Lösungen, die auf der Vervielfachung von Text-Schatten basieren, es ist nicht wirklich flexibel, es kann für einen Strich mit 2 Pixeln funktionieren, bei dem die Richtungen 8 sind, aber mit nur 3 Pixeln wurden Strichrichtungen 16 und so weiter. Nicht wirklich angenehm zu handhaben.

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 ebenfalls ein eigenes Support-Problem hat. filter: progid:DXImageTransform kann verwendet werden oder IE <10 funktioniert aber oft nicht wie erwartet.

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

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

Verglichen mit text-shadow, dessen Unterstützung Folgendes ist: Chrome 4.0, FF 3.5, IE 10, Safari 4.0, Opera 9, ergibt es sogar noch mehr Kompatibilität.

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

4
holden

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>

0