Textrahmen mit CSS (Rahmen um den Text)

Question

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

Answer 1

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 Text Hub verwenden, die nur in 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 read more als CSS-Tricks.

Answer 2

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

text-shadow: 0 0 2px #fff; 

aber es in allen Browsern gewohnt zeigen sofort. Die Verwendung einer Skriptbibliothek wie Modernizr hilft jedoch, es in den meisten Browsern richtig zu machen.

Answer 3

Im Folgenden werden alle Browser decken wert abdeckt:

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

Answer 4

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

Answer 5

ich nicht so viele Lösungen mag Text-Schatten basierend auf Multiplikation, dann ist es nicht wirklich flexibel, es kann für einen 2-Pixel-Takt arbeiten, wo Richtungen 8 hinzuzufügen, aber mit nur 3 Pixel Strichrichtungen wurde 16, und so weiter ... Nicht wirklich komfortabel zu verwalten.

Das richtige Werkzeug vorhanden ist, dann ist es SVG <text> die nichts wert Unterstützung Problem in diesem Fall den Browsern verursachen die Verwendung von text-shadow hat auch seine eigene Unterstützung Problem, filter: progid:DXImageTransform kann < 10 verwendet oder IE, aber oft werden funktioniert nicht wie erwartet.

Für mich die beste Lösung bleibt SVG mit einem Rückfall in nicht-gestreichelt Text für älteren Browser:

Diese Art von approuch pratically funktioniert auf alle Versionen von Chrome und Firefox, Safari ab Version 3.04, Opera 8, IE 9

Im Vergleich zu text-shadow deren Träger sind: Chrome 4.0, FF 3.5, IE 10, Safari 4.0, Opera 9 , es ergibt sich noch mehr kompatibel.

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