Viele Schriftarten bieten auch einen Outline-Style an; werden damit gewissermassen «hohl» und haben einen feinen Rand um die Buchstaben und Zeichen. Wenn solche Fontstyles bei Ihren Schriftarten fehlen, kann der Effekt auch mit CSS fabriziert werden. Wir zeigen Ihnen, wie das geht.
Erstellen Sie zunächst im CSS-Stylesheet Ihrer Website eine neue Klasse. Wir nennen die unsere «outline». Der folgende Code kann Ihnen als Grundgerüst dienen. In WordPress erreichen Sie das CSS-Stylesheet unter Design/Customizer/Zusätzliches CSS:
.outline {
font-family: 'Montserrat';
font-size: 40px;
letter-spacing: 0.05em;
color: #ffffff;
text-shadow:
1px 1px 1px #000000,
1px -1px 1px #000000,
-1px 1px 1px #000000,
-1px -1px 1px #000000;
line-height: 1.4;
}Dieser Code würde etwa eine solche Darstellung ergeben:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. @ # ä ö é
Zu beachten ist, dass im Code die Fontfarbe als weiss (#ffffff) angegeben ist und die Umrandung als schwarz (#000000). Diese Werte sollten Sie natürlich Ihrer Website entsprechend anpassen – bei einem farbigen Hintergrund drängt sich dies auf. Auch haben wir einen etwas grösseren Zeichenabstand (in Zeile 5) und einen grösseren Zeilenabstand (in Zeile 6) definiert. Die Anzeige wäre sonst sehr gedrängt, da müssen Sie vielleicht ein wenig mit den Werten spielen, bis es gut ausschaut.
Der guten Ordnung halber sei auch erwähnt, dass nur modernere Browser mit dem «text-shadow» umgehen können. In Internet-Browsern älteren Datums (etwa Internet Explorer, älter als Version 10) würde obiger Text ohne Umrandung ausgegeben. Weisser Text auf weissem Hintergrund liest sich aber ausserordentlich schlecht. Aber diese alten Browser sterben auch langsam aus – ganz weg sind sie freilich aber noch nicht.
So oder so: Wenn Sie einen «richtigen» Outline-Font finden, welcher auf Ihrer Website passt, benötigen Sie diesen CSS-Hack nicht. Wenn eine solche Alternative für Sie in Frage kommt, würden wir Ihnen unbedingt dazu raten. Damit sind auch die Kompatibilitätsprobleme vom Tisch.
Werbung
Werbung
