Textrand mit CSS (Rand um Text)

107

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

Textrand

text css

— jho1086
quelle

221

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;

Geben Sie hier die Bildbeschreibung ein

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>

Erweitern Sie das Snippet

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

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

Geben Sie hier die Bildbeschreibung ein

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

<h1>test</h1>

Erweitern Sie das Snippet

Auch lesen Sie mehr als CSS-Tricks.

— Bücherregal
quelle

Bemerkenswert: Bitte testen Sie die browserübergreifenden Funktionen dieser Methoden ... Ich habe ernsthafte Probleme mit Clients im IE, mindestens 9 .. Ich denke irgendwie darüber nach, den PNG-Weg zu gehen.

— ErickBest

1

@ErickBest Der zweite Link erwähnt IE9-Probleme. Obwohl diese Seite auf Google Caniuse.com/css-textshadow

— AnnanFay

Verursacht eine schlechte Anzeige für Text mit Transparenz (mit rgba).

— Alejandro Nava

14

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.

— jtheman
quelle

1

Ich habe es bereits versucht, aber ich brauche ein festes Weiß um den Text.

— jho1086

8

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>

Erweitern Sie das Snippet

— gehalten
quelle

1

Vielen Dank, dass Sie Ihre Lösung geteilt haben. Ich denke dein Recht ist flexibler. Meistens ist es jedoch effizienter, CSS zu verwenden. Ich werde später versuchen, SVG zu verwenden.

— jho1086

6

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

— chezwhite
quelle

3

Können Sie auch eine Erklärung hinzufügen?

— Robert

5

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 */

— dtbarne
quelle