CSS テキスト外側の縁取りのガタつきで困っています

実現したいこと

CSSで文字の縁取りを表現した際に角にガタつきが生じており
解消したいので色々試してはいるものの行き詰まっており困っています。。
イメージ説明

発生している問題・分からないこと

デザインソフトで作成されたようにスムーズな縁取り線をCSSで表現したいです。

該当のソースコード

HTML

1 <h1 class="member"><span class="memberCntM">1234</span><div class="small">人</div></h1>

CSS

1 position: absolute;2 top: min(calc((733 / 750) * 100vw), 733px);3 left: 50%;4 transform: translateX(-50%);5 color: #3DAADF;6 text-align: center;7 text-shadow: 8 3px 3px 0px #ffffff, 9 -3px -3px 0px #ffffff, 10 -3px 3px 0px #ffffff, 11 3px -3px 0px #ffffff, 12 3px 0px 0px #ffffff, 13 -3px 0px 0px #ffffff, 14 0px 3px 0px #ffffff, 15 0px -3px 0px #ffffff;16 font-family: "Noto Sans JP";17 font-size: min(calc((110.999/ 750) * 100vw), 110.999px);18 font-style: normal;19 font-weight: 900;20 line-height: 172.419px; /* 155.334% */21 letter-spacing: -2.995px;

試したこと・調べたこと

上記の詳細・結果

■HTMLをSVGで記述するよう変更したが、変数が挟まっているからかCSSが反映されてなくなり断念

HTML

1<svg viewBox="0 0 100 50"> 2 <text x="0" y="50%"><span class="memberCntM">33333</span>人</text> 3</svg>

CSS

1svg {2 width: 100%;3 height: auto;4 overflow: visible;5}6text {7 fill: #000;8 stroke: #FFF;9 stroke-width: 1;10 stroke-linejoin: round;11}

■CSSを以下の記述に変更したが、添付のように文字自体が細くなり線も交差していたりと
見た目がおかしくなったため断念

CSS

1 color: #000;2 -webkit-text-stroke: 1px #FFF;3 text-stroke: 1px #FFF;![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-02-08/a4cb340b-82ec-4c19-8e38-5eacbf2ff59a.png)

イメージ説明

補足

特になし

コメントを投稿

0 コメント