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

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

Beispiel

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

html<p>
  Text
</p>

cssbody {
  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:

html<p>
  Text
</p>

cssbody {
  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:

html<p>
  Text
</p>

cssbody {
  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:

html<p>
  Text
</p>

cssbody {
  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