webkit-text-ストローク CSS を使用して h1 にストロークを追加します

ストロークを使用して h1 に境界線を適用してみました

font-family: 'Lobster Regular',Helvetica,Arial,Lucida,sans-serif;
font-size: 133px;
color: #ff5a00!important;
-webkit-text-stroke: 7px rgb(255 255 255);

私の結果

私が欲しいもの

最終結果

1

最終結果が必要な場合は、HTML と CSS などのコードが必要です。

– いつも助けてくれる

2020 年 9 月 5 日 1:08

2

text-shadow を使用しないのはなぜですか?

– MVB76

2020 年 9 月 5 日 1:10

@AlwaysHelping 申し訳ありませんが、投稿を更新しました。

– グレン

2020 年 9 月 5 日 1:13

1

@MVB76 はい、実行しましたが、期待した結果が得られませんでした。text-shadow: -7px -7px 0 #ffffff, 7px -7px 0 #ffffff, -7px 7px 0 #ffffff,7px 7px 0 #ffffff;

– グレン

2020 年 9 月 5 日、1:15

------------------------

text-ストローク プロパティは、標準化されていないプロパティです。

この機能は非標準であり、標準化の軌道に乗っていません。 Web に面している運用サイトでは使用しないでください。すべてのユーザーに機能するわけではありません。また、実装間に大きな非互換性が存在する可能性があり、将来的に動作が変更される可能性があります。 - MDN

最良の代替方法は、次のように text-shadow プロパティを使用することです。

text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;

ただし、これは短いディレクティブの場合にのみ適切に機能します。より大きな数値を使用すると、常に見た目に欠陥が生じます。

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

body {
  background: #212121;
}

.stroke {
  font-family: "Lobster", Helvetica, Arial, Lucida, sans-serif;
  font-size: 133px;
  color: #ff5a00 !important;
  text-shadow: -7px -7px 0 #fff, 7px -7px 0 #fff, -7px 7px 0 #fff, 7px 7px 0 #fff;
}

<h1 class="stroke" stroke="Font">
  Font
</h1>