本文へ
ハクソク

世界を動かす技術を、日本語で。

CSSにおける多重ストロークテキスト効果

元記事: 原文(yuanchuan.dev)

概要

  • レトロなマルチストロークテキスト効果 をCSSで再現する方法の解説
  • text-strokeプロパティ の制限とその回避策
  • 異なるストローク幅や色 を重ねるテクニック
  • ブラウザごとの描画の違い やパフォーマンスの注意点
  • フォント選びや実験例 の紹介

CSSでレトロなマルチストロークテキスト効果を再現する方法

  • text-strokeプロパティ は一度に一つの値しか指定できない仕様
  • 複数の要素を重ねて配置 することで、マルチストローク効果を実現
    • 各レイヤーで text-stroke-width を変化させる工夫
  • 例：-webkit-text-stroke-widthを段階的に増やすことで、 アウトラインの厚み を調整
  • 色のバリエーション も各レイヤーで指定し、レトロな雰囲気を表現
  • 絶対配置 や z-index で各レイヤーの重なり順を制御

ブラウザごとの描画の違い

  • FireFox はアウトラインのレンダリングが滑らか
  • ChromeやSafari はやや粗さが目立つ場合がある
  • 複数文字 をインラインで配置すると、 文字同士のアウトラインが連結 される現象

フォント選びと実験方法

  • フォント選び によって最終的な印象が大きく変化
  • @google-font関数 を使い、様々なフォントを手早く試すことが可能
    • 例：Matemasie, Pacifico, Tangerine, Cherry Bomb Oneなど
  • css-doodle を活用した実験・画像生成が可能

パフォーマンスと実用上の注意点

  • 大きなフォントサイズ や 多層レイヤー ではパフォーマンスが低下
  • CSSフィルター同様の負荷 が発生し、ちらつきが目立つ場合がある
  • 実験や画像生成 には適しているが、 本番環境での大量使用は非推奨

追加例・参考リンク

提供: ハクソク · 要約更新:

AIによる日本語要約です。内容は原文とあわせてご確認ください。

Hacker Newsの議論を読む

Hackerたちの意見

いいね！ブラウザによってレンダリングがこんなに違うのは残念だね。影を使って同じこと試してみた？影も重ねられると思うよ。

└

影はアウトラインを作るために円形に広げる必要があるから、全体の形はだいたい円に収束するんだ。テキストの形にはほとんど沿わないけどね。

FirefoxのCSSレンダリングエンジンがスムーズにするのを好む理由が気になるな。実装が劇的に違うように見えるけど、もしかしたらレンダリングのエッジケースだからかも。

└

FirefoxはSDF（オブジェクトへの最短距離）みたいに見えるけど、Chromeのは何なのかよくわからないな…。

└

Firefoxの丸みの効果はあんまり好きじゃないけど、Chromeの解釈は明らかにおかしいと思う。スパイクが出ちゃってるし。アスタリスクの形から考えると、アウトラインは普通の六角形に近づくはずなんだけど、どちらのブラウザもそれを実現できてないね。

└

LoveのVを見てみて。Chromeでバグみたいに見えるよ。

└

Firefoxは、ストロークの前にもっと積極的にサブピクセルレンダリングやパススムージングを適用してると思う。グリフのアウトラインパスを、ストロークアルゴリズムに渡す前に、より高い精度で再サンプリングしてるんだよね。

└

ミタージョイン（Safari）VS ラウンドジョイン（Chrome）

└

ストロークの拡張は複雑なテーマで、合理的な結果が一つじゃないし（主観的な好みがある）、たくさんのコーナーケースや間違った答えがあるんだ。Firefoxは、全てのポイントで距離に基づいて拡張することを選んでいて、これは合理的な答えの一つで、たぶん最も一般的な方法だね。カスプは曲線に拡張されるし。他のブラウザはカスプを保持することを選んでいて、これも合理的な答えだと思うし、計算コストも安いと思う。でも、特徴サイズ（ノード間の距離）を超えて拡張すると、退化ケースがたくさん出てきて、4つ目の赤いリングでは明らかに間違ってる。ボックスシャドウも拡張が起こるケースの一つで、4つ目の長さパラメータ、スプレッド距離が関係してる。角がカスプなら、シャドウの角もカスプになるし、丸みを帯びていればシャドウの角も丸くなる。役立つ図があるから、詳しくはここを見てみてね：https://drafts.csswg.org/css-backgrounds/#shadow-shape。ちょっとしたトリックとして、0.1pxのボーダー半径を使うと、ボックスはまだ四角に見えるけど、拡張されたシャドウは曲がるんだ。たまに便利だよ。でも、元の記事の内容に戻ると、カスプノードの代わりに微小な曲線を持つフォントを使うと、Chromium/SafariはFirefoxにもっと近くなるよ。

└

自分もこの不一致に遭遇したことがある。さらに、私が奇妙だと思ったのは、「ドット」（ティトル、ピリオド、セミコロン）で、サイズが大きくなると真ん中が空洞になるような感じで、自分自身をキャンセルしてるみたい。試した他の形ではそんなことなかったし、ブラウザも驚くほど一致してた。昔、いくつかのショットとプレイグラウンドを作ったよ：https://x.com/myfonj/status/1870178380831732160

CSSを描画ツールにしようとするのはやめた方がいいよ。そうじゃないから。代わりにSVGや画像の使い方を学ぶべきだね。

└

これ、見出しみたいな表示テキストには実際にクールかも。画像だけのためじゃないと思うよ。

Hacker Newsで議論の続きを見る