実現したいこと
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;
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
■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)
補足
特になし
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2024/02/08 08:27