Eigenschaft text-stroke-width

Die Eigenschaft text-stroke-width legt die Dicke der Kontur von Textzeichen oder deren Umrisslinie fest. Die Eigenschaft akzeptiert Werte, die in Größeneinheiten wie px, em, rem usw. angegeben sind. Ebenso können die folgenden Werte festgelegt werden: thin (dünne Linie), medium (mittlere Linie) und thick (dicke Linie).

Syntax

Selektor {
	text-stroke-width: Zahl oder thin oder medium oder thick;
}

Beispiel

Lassen Sie uns unseren Textzeichen eine dünne Umrisslinie zuweisen:

<p>
	Text
</p>

body {
	width: 100px;
	height: 50px;
}
p {
	-webkit-text-stroke-color: orange;
	-webkit-text-stroke-width: thin;
	text-stroke-width: thin;
	color: white;
	font-size: 10em;
	margin-top: 0;
	font-weight: bold;
	font-family: Arial;
}

Beispiel

Lassen Sie uns nun die dünne Umrisslinie auf eine mittlere ändern:

<p>
	Text
</p>

body {
	width: 100px;
	height: 50px;
}
p {
	-webkit-text-stroke-color: orange;
	-webkit-text-stroke-width: medium;
	text-stroke-width: medium;
	color: white;
	font-size: 10em;
	margin-top: 0;
	font-weight: bold;
	font-family: Arial;
}

Beispiel

Lassen Sie uns unseren Textzeichen eine dicke Umrisslinie zuweisen:

<p>
	Text
</p>

body {
	width: 100px;
	height: 50px;
}
p {
	-webkit-text-stroke-color: orange;
	-webkit-text-stroke-width: thick;
	text-stroke-width: thick;
	color: white;
	font-size: 10em;
	margin-top: 0;
	font-weight: bold;
	font-family: Arial;
}

Beispiel

Lassen Sie uns außerdem unseren Textzeichen eine Umrisslinie von 2px zuweisen:

<p>
	Text
</p>

body {
	width: 100px;
	height: 50px;
}
p {
	-webkit-text-stroke-color: orange;
	-webkit-text-stroke-width: 2px;
	color: white;
	font-size: 10em;
	margin-top: 0;
	font-weight: bold;
	font-family: Arial;
}

Siehe auch

die Eigenschaft text-stroke,
die die Textkontur festlegt
die Eigenschaft text-stroke-color,
die die Farbe der Textkontur festlegt