text-stroke-widthプロパティ

プロパティ text-stroke-width は、テキスト文字の輪郭（ストローク）の太さを指定します。 このプロパティは、px、em、rem などの単位で指定された数値を受け入れます。 また、以下の値も指定できます: thin (細い線)、medium (中程度の線)、および thick (太い線)。

構文

cssセレクタ {
  text-stroke-width: 数値またはthinまたはmediumまたはthick;
}

例

テキストに細い輪郭を設定してみましょう:

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

Результат:

例

次に、細い輪郭を中程度の輪郭に変更してみましょう:

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

Результат:

例

テキストに太い輪郭を設定してみましょう:

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

Результат:

例

また、テキストに 2px の輪郭を設定してみましょう:

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

Результат:

関連項目