Schriftrahmen in CSS festlegen

1. Verwenden Sie die Eigenschaft -webkit-text-stroke, um in CSS Rahmen auf Schriftarten anzuwenden
2. Verwenden Sie die Eigenschaft text-shadow, um in CSS Rahmen auf Schriftarten anzuwenden

In diesem Tutorial werden Methoden zum Anwenden von Rahmen und Farbe auf die Schriftart in CSS vorgestellt.

Verwenden Sie die Eigenschaft -webkit-text-stroke, um in CSS Rahmen auf Schriftarten anzuwenden

Wir können die Eigenschaft text-stroke für einen Text verwenden, um einer Schriftart in CSS Rahmen zuzuweisen. Wir müssen das Präfix webkit vor der Eigenschaft text-stroke verwenden, um die Funktion zu verwenden. Es funktioniert jedoch nur auf den web-kit-basierten Browsern wie Safari und Chrome. Mit der Eigenschaft text-stroke können wir den Text in Vektorzeichnungsanwendungen wie Adobe Illustrator dekorieren. Die Eigenschaft ist die Kurzform der anderen beiden Eigenschaften, text-stroke-width und text-stroke-color. So können wir die Breite und Farbe des Textrahmens mit der Eigenschaft text-stroke definieren.

Schreiben Sie beispielsweise Text in das HTML-Tag h1. Wählen Sie in CSS das Tag h1 aus und wenden Sie die Eigenschaft -webkit-text-stroke an. Stellen Sie die Breite auf 1px und die Farbe auf red. Stellen Sie dann die Schriftart mit der Eigenschaft font-family auf arial und geben Sie die Farbe green an.

Im folgenden Beispiel wird ein grüner Text mit einem roten Rand angezeigt. So können wir in einer Schrift mit einer anderen Farbe Rahmen setzen.

Beispielcode:

<h1>The green font has red border</h1>

h1 {
 -webkit-text-stroke: 1px red;
 font-family: arial; color: green;
}

Verwenden Sie die Eigenschaft text-shadow, um in CSS Rahmen auf Schriftarten anzuwenden

Wir können die Eigenschaft text-stroke emulieren, indem wir die Eigenschaft text-shadow verwenden, um der Schriftart in CSS einen Rahmen hinzuzufügen. Die Eigenschaft text-shadow wird verwendet, um einem Text einen Schatten zu verleihen. Die ersten beiden Werte bezeichnen die Eigenschaften h-shadow und v-shadow. Sie bezeichnen die Position des horizontalen und vertikalen Schattens. Wir können den Wert blur-radius als dritten Wert in der Eigenschaft text-shadow setzen. Es wird den Schatten von der angegebenen Position mit dem angegebenen Radius verwischen. Wir können die Farbe des Schattens angeben, was ihn zum vierten Wert in der Eigenschaft text-shadow macht. Diese Methode funktioniert bei den meisten Browsern.

Schreiben Sie beispielsweise Text in das HTML-Tag h1. Wählen Sie in CSS das Tag h1 aus und schreiben Sie die Eigenschaft text-shadow. Geben Sie für die Eigenschaften h-shadow und v-shadow den Wert 0 an. Schreiben Sie 2px für unschärfe-radius und geben Sie die Farbe red an.

Im folgenden Beispiel haben wir die Randfunktion einer Schriftart mit der Eigenschaft text-shadow emuliert. Wir setzen den Wert 0 für horizontalen und vertikalen Radius, damit der Schatten wie eine Umrandung aussieht, wenn wir dem Schatten die Farbe geben.

Beispielcode:

<h1>The black font has red border</h1>

h1 {
 text-shadow: 0 0 2px red;
}