So setzen Sie die Schriftrandgrenze in CSS

So setzen Sie die Schriftrandgrenze in CSS

Mit CSS können Sie Schriftarten auf verschiedene Weise stylen. Zum Beispiel können wir die Grenze für eine Schriftart festlegen, um sie in Bezug auf ihr Aussehen attraktiver zu machen. Eine Schriftrandgrenze wird auch hinzugefügt, wenn sie einen Teil des Textes skizzieren müssen. Es ermöglicht Ihnen auch, den Text zu stylen und Farbe und Breite entsprechend Ihren Vorlieben hinzuzufügen.

In diesem Leitfaden erfahren wir, ob wir in CSS eine Schriftgrenze festlegen können.

So setzen Sie die Schriftrandgrenze in CSS?

In CSS können wir die folgenden Eigenschaften verwenden, um die Schriftgrenze festzulegen:

  • -Webkit-Text-Stroke-Eigenschaft
  • Text-Shadow-Eigenschaft

Also lasst uns anfangen.

Methode 1: Verwenden

Die Eigenschaft zum Textschlag wird speziell eingeführt, um die Grenze an Schriftarten festzulegen. Der Eigentums Textschlag ist jedoch nicht in den W3C-Standards enthalten. Deshalb das Schlüsselwort “-WebkitWird ihm hinzugefügt, um die angegebene Funktionalität auszuführen. Der -Webkit-Text-Property arbeitet auf Safari, Google Chrome und Firefox Browser.

Schauen Sie sich das folgende Beispiel an, um mehr über die Festlegung der Schriftrandgrenze mit der Eigenschaft -webkit-Text-Stroke-Eigenschaft zu erfahren.

Beispiel

Hier ist der Text, für den wir den Rand festlegen möchten:

In unserer HTML -Datei haben wir einen Text als Überschrift mit der “hinzugefügt

Html

Beste Bildungswebsite

Um die Grenze um die Schriftart zu setzen, werden wir das CSS verwenden “-Webkit-Text-Stroke„Eigentum mit“1px"Grenze und gib ihm das"Rot" Farbe. Wir werden auch die Textfarbe als blau angeben, wobei wir die “verwendenFarbe" Eigentum:

CSS

H2
-webkit-text-taste: 1px rot;
Farbe blau;

Jetzt speichern wir den Code und öffnen die HTML -Datei im Browser:

Es ist ersichtlich, dass die Schriftgrenze mit der Eigenschaft -webkit-Text-Stroke erfolgreich erfolgreich angewendet wurde und der hinzugefügte Text stilvoll aussieht.

Methode 2: Verwenden Sie die Eigenschaft der Text-Shadow

TextschattenDie Eigenschaft ist selbst ein selbsternerter Begriff, der zum Hinzufügen von Schatten in Texten verwendet wird. Es kann jedoch manipuliert werden, um die Schriftrandgrenze effizient festzulegen.

Wenden wir also diese CSS -Eigenschaft auf denselben Text an, um den Rand um ihn herum festzulegen.

Beispiel

Hier werden wir den roten Schatten herausspringen lassen “1px"Von jeder Seite mit der Eigenschaft von Text-Shadow" "-1px 0px 0px"Wird den linken Seitenschatten angeben"1px 0px 0px"Wird den rechten Schatten angeben"0px -1px 0px”Wird den Schatten der Oberseite angeben und“0px 11px 0px”Wird den Schatten der unteren Seite angeben:

CSS

H2
Textschatten:
-1px 0px 0px rot,
1px 0px 0px rot,
0px -1px 0px rot,
0px 1px 0px rot; Farbe: Blau;

Ausgang

Wir haben verschiedene Ansätze zum Einstellen von Schriftstellungsgrenzen in CSS zusammengestellt.

Abschluss

Um die Schriftgrenze in CSS festzulegen, die “-Webkit-Text-Stroke”Eigentum und die“TextschattenEigenschaften können verwendet werden, um die Schriftgrenze auf bestimmte Weise hinzuzufügen. Der Eigentums-Text-Schlaganfall ist nicht in den W3C-Standards enthalten. Es kann jedoch mit dem Schlüsselwort -webkit verwendet werden. In diesem Artikel wurden zwei Methoden erläutert, mit denen Sie die Schriftgrenzen in CSS festlegen können.