Свойство text-stroke-width

Свойство text-stroke-width задава дебелината на контура на текстовите символи или неговия контур. Свойството приема стойности, посочени в мерни единици като px, em, rem и т.н. Също така могат да се зададат следните стойности: thin (тънка линия), medium (средна линия) и thick (дебела линия).

Синтаксис

селектор {
	text-stroke-width: число или thin или medium или thick;
}

Пример

Нека зададем на символите в нашия текст тънък контур:

<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;
}

Пример

А сега нека сменим тънкия контур със среден:

<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;
}

Пример

Нека зададем на символите в нашия текст дебел контур:

<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;
}

Пример

Също така нека зададем на символите в нашия текст контур от 2px:

<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;
}

Вижте също

свойство text-stroke,
което задава контур на текста
свойство text-stroke-color,
което задава цвят на контура на текста