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;

試したこと・調べたこと

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件

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

SVGのタグである <text> の中に HTML のタグである <span> を入れることはできません。入れるとしたら、<tspan> を使います。

テキストコンテンツの子要素

投稿2024/02/08 06:52

int32_t

総合スコア21301

manmaru

2024/02/08 08:27

回答ありがとうございます。仰る通りですね、調べていくうちに私もそちらの誤り気が付きました。ガタツキは解決できていないのですが参考になりました。ご指摘ありがとうございます。

行動規範の内容に同意します

文字の縁取りを表現する際に角のガタつきが生じるのは、text-shadow の影の位置が原因かもしれません。text-shadow の位置を微調整することで、この問題を解消できる場合があります。

以下は、微調整された text-shadow のプロパティです。影の位置を少し調整して、角のガタつきを軽減することができます。一度、トライしてみてください。

text-shadow: 
    2px 2px 0px #ffffff, 
    -2px -2px 0px #ffffff, 
    -2px 2px 0px #ffffff, 
    2px -2px 0px #ffffff, 
    2px 0px 0px #ffffff, 
    -2px 0px 0px #ffffff, 
    0px 2px 0px #ffffff, 
    0px -2px 0px #ffffff;

このコードは、影を斜めに配置し、角のガタつきを緩和します。適切な影の位置は、デザインや要件によって異なる場合がありますので、必要に応じて微調整してください。

投稿2024/02/08 06:15

shoshinsha123

総合スコア215

manmaru

2024/02/08 06:41

迅速に回答ありがとうございます。試してみましたがガタツキは解決できませんでした。。ここに画像添付ができないようなのでお見せすることができないのですがmm 外線がほそくなった分多少ガタツキは見えづらくなりましたが、ガタツキの度合いとしては変わらないような状況です。。頂いた改善コードを元に調整ためしてみます！ありがとうございました！！

行動規範の内容に同意します

ベストアンサー