実現したいこと
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;

補足
特になし

0 コメント