Make each font switch randomly
React コンポーネントとして提供されるフォント切り替えUI。
import FontSwitcher from "./react/FontSwitcher";
<FontSwitcher />| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
fonts |
string[] |
下記6種 | 使用するフォントリスト |
target |
string |
"h1,h2,h3,p,li,td,th" |
ランダムフォントを適用するCSSセレクタ |
デフォルトフォント:
- DotGothic16
- Reggae One
- Yuji Syuku
- Noto Sans JP
- M PLUS Rounded 1c
- Rampart One
| ボタン | 説明 |
|---|---|
| フォント選択（セレクト） | document.body 全体のフォントを切り替え。選択値は localStorage に保存 |
| 🌙 ダーク / ☀️ ライト | <body> に fs-dark クラスを付け外しでダークモードを切り替え |
| 🎲 ランダム | 対象セレクタの文字を1文字ずつ異なるフォントの <span> で包む。↩️ 元に戻すで復元 |
| ▶ 自動 | 0.3秒〜10秒の間隔でランダムフォントを自動更新。⏹ 停止で解除 |
- Google Fonts の
<link>タグを動的に<head>へ挿入するため、外部ネットワークアクセスが必要 pre,code,script,style要素内のテキストはランダム化対象外- フォント選択・ダークモードの状態は
localStorage（キー:fs_font,fs_dark）に保存される - 動作確認無し（実環境での動作検証は未実施）