Text mit Umriss und Text Schatten

Ich möchte folgenden Schriftschnitt erstellen. Wenn es nicht möglich ist, möchte ich diesem Stil so nahe wie möglich sein. Ich muss IE unterstützen, damit ich text-stroke nicht verwenden kann.Text mit Umriss und Text Schatten

Der nächste Weg ich gekommen bin, ist mehrere text-shadow Attribute, zum Beispiel zu verwenden:

h1 { 
 
    color: #2e536f; 
 
    font-weight: bold; 
 
    font-family: sans-serif; 
 
    font-size: 7em; 
 
    text-transform: uppercase; 
 
    text-shadow: 
 
    -1px -1px 0 #fff, 
 
     1px -1px 0 #fff, 
 
    -1px 1px 0 #fff, 
 
     1px 1px 0 #fff, 
 
    -2px -5px 0px #ff7c7c; 
 
} 
 

 
body { 
 
    background: #2e536f; 
 
}

<h1>Zwei</h1>

Während es mehrere Aufgaben der Fall ist, kann ich nicht die Farbe transparent machen , um den Text Schatten dahinter zu enthüllen.

Wie kann ich das lösen?

Quelle

2017-01-05 Marian Rick

warum nicht eine svg verwenden ? –

@JacobGray erwägen, einen längeren Text zu haben. Dann könnten Sie den Text entweder auf mobilen Geräten (die sehr klein werden könnten) skalieren oder mehrere Versionen mit unterschiedlichen Zeilenumbrüchen erstellen. So eine SEO-freundliche CSS-Lösung scheint skalierbar zu sein, vor allem, wenn es mehrere Überschriften mit dem gleichen Stil gibt. –

Ich denke, das wäre hilfreich für Sie, um diese Lösung zu erreichen. http://jsfiddle.net/kovalchik/yJff9/ –

body { 
 
    background: #2e536f; 
 
} 
 

 
h1 { 
 
    color: #2e536f; 
 
    font-weight: bold; 
 
    font-family: sans-serif; 
 
    font-size: 7em; 
 
    text-transform: uppercase; 
 
    text-shadow: 
 
    -1px -1px 0 #fff, 1px -1px 0 #fff, 1px 1px 0 #fff, 1px 1px 0 #fff, 2px -5px 0px #ff7c7c 
 
}

<h1>Zwei</h1>

Kann dies auf Ihre erwartete Ausgabe der Nähe?

Quelle

2017-01-05 13:22:41

Wenn Sie IE unterstützen müssen, ist Ihre beste Wette, für SVG gehen. Sie können Schlaganfall und/oder Schatten zu Text geben, um den genauen Stil zu machen, den Sie suchen. Dies passt zwar zu Titeln, kann aber bei Texten, die sich über mehrere Zeilen erstrecken, mühsam sein.
Hier ist dein Beispiel mit einem Inline-SVG:

body { 
 
    background: #2e536f; 
 
} 
 
svg { 
 
    font-weight: bold; 
 
    font-family: sans-serif; 
 
}

<svg viewbox="0 0 10 3"> 
 
    <text font-size="3" x="1.5" y="2.5" dx="0" dy="0" fill="#FF7C7C">ZWEI</text> 
 
    <text font-size="3" x="1.5" y="2.5" dx="0.1" dy="0.15" fill="transparent" stroke="#fff" stroke-width="0.08">ZWEI</text> 
 
</svg>

Beachten Sie, dass SVG (auch für Titel) nicht SEO auswirkt und google indexes SVG since 2010

Quelle

2017-01-05 15:48:03

Während dies ein großartiger Ansatz ist, wäre eine CSS-Lösung viel flexibler. Zum Beispiel, wenn Sie den Text durch einen ganzen Satz ersetzen, skaliert der Svg und wird wirklich klein. Obwohl es überhaupt keine Zeilenumbrüche gibt. Mit 'text-stroke' ist das überhaupt kein Problem. Vielleicht muss ich einfach etwas Zeit verstreichen lassen bis es von Microsoft unterstützt wird. (Text-Strich-Version: http://codepen.io/anon/pen/pRvpqN?editors=1100) –

Ich sehe, was Sie @MarianRick bedeuten, aber es gibt keine Möglichkeit, die ich kenne, um Ihren Ziel-Stil zu erreichen und IE im Internet zu unterstützen gleiche Zeit. –

das ist traurig;) danke für deinen Vorschlag. Obwohl Google Indexe SVGs zu sehen ist, ist es gut zu wissen! –

Text mit Umriss und Text Schatten

Antwort

Verwandte Themen