Caratteri ospitati autonomamente e stile

Argomenti di questa guida

Come ospitare autonomamente file .ttf, .otf o .woff2, senza richiedere caratteri Google o di sistema.
Come caricare questi caratteri in dock.html oppure featured.html tramite parametri URL o CSS personalizzato di OBS.
Quali variabili CSS regolano dimensioni del testo e disposizione in entrambe le pagine.
Alternative rapide se vuoi continuare a usare Google Fonts o i caratteri di sistema installati.

Lo stesso featured.html overlay con &googlefont=Pacifico applicato: i caratteri ospitati autonomamente funzionano allo stesso modo tramite @font-face.

1) Ospita i file dei caratteri

Serve un link HTTPS diretto al file del carattere. Scegli un host che consenta hotlinking/CORS affinché il browser interno a OBS o all'app possa scaricarlo.

Opzioni rapide: catbox.moe, 0x0.st, file.io (temporaneo).
Opzioni durature: GitHub Pages, Cloudflare Pages, Netlify, il tuo server web.
Ospita solo caratteri che sei autorizzato a ridistribuire. Se disponibili, i file WOFF2 sono più piccoli e si caricano più velocemente di TTF/OTF.

2) Crea il CSS

Definisci il carattere con @font-face e indirizzalo al file ospitato, poi imposta l'overlay affinché lo usi tramite --font-family.

@font-face {
  font-family: 'MyDockFont';
  src: url('https://your-site.example/fonts/MyDockFont.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
}

/* Optional second weight */
@font-face {
  font-family: 'MyDockFont';
  src: url('https://your-site.example/fonts/MyDockFont-Bold.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
}

:root {
  --font-family: 'MyDockFont', 'Segoe UI', 'Arial Unicode MS', sans-serif;
  --comment-font-size: 28px;
  --author-font-size: 24px;
  --message-line-height: 32px;
}

Servono più caratteri, per esempio per armeno, russo e alfabeto latino? Dichiara ogni font-face ed elencali in --font-family come 'FontA', 'FontB', 'FontC', sans-serif. Il browser userà automaticamente un carattere alternativo se manca un glifo.

3) Applicalo a dock.html o featured.html

Sorgente browser OBS: Apri l'URL dock/featured in OBS > Sorgente browser > CSS personalizzato e incolla il blocco CSS sopra.

Parametro URL (CSS ospitato): Carica il CSS sullo stesso host dei caratteri, poi aggiungi &css=https://your-site.example/my-font.css all'URL della pagina:

https://socialstream.ninja/dock.html?session=YOURSESSION&css=https://your-site.example/my-font.css
https://socialstream.ninja/featured.html?session=YOURSESSION&css=https://your-site.example/my-font.css

Parametro URL inline: Per prove rapide puoi passare il CSS direttamente con &css= oppure codificalo in base64 con &b64css= (entrambe le pagine li supportano).
Cambio rapido del carattere: &font=YourInstalledFont usa il nome di un carattere di sistema, mentre &googlefont=Noto+Sans+Armenian,Noto+Sans carica Google Fonts se preferisci non ospitare autonomamente i caratteri.

Queste opzioni funzionano allo stesso modo nell'estensione Chrome, nell'app Electron e sul sito ospitato, perché tutti caricano gli stessi file dock.html/featured.html .

4) Regola il testo dell'overlay

Variabili tipografiche principali usate da entrambe le pagine:

:root {
  --font-family: 'MyDockFont', 'FontB', sans-serif;
  --comment-font-size: 28px;  /* message text size */
  --author-font-size: 24px;   /* name text size */
  --comment-font-weight: 600; /* featured.html */
  --author-font-weight: 700;  /* featured.html */
  --message-font-weight: 500; /* dock.html */
  --name-font-weight: 700;    /* dock.html */
  --comment-color: #ffffff;
  --author-color: #ffe08a;
  --comment-bg-color: #161616;
  --author-bg-color: #202020;
}

Opzioni aggiuntive solo per il dock: --stylized-emoji, --stylized-img, --text-stroke-width, --text-shadow, e i colori delle righe (--highlight-base, --highlight-base2, più le varianti compact ).

Modifiche alla disposizione di Featured: regola --comment-width, --comment-padding, --comment-area-bottom, e --comment-area-height per riposizionare il riquadro nella parte inferiore senza modificare l'HTML.

Abbina le modifiche CSS alle opzioni URL esistenti, come &scale, &compact, oppure &hidesource quando devi modificare la disposizione nel dock.

5) Risoluzione dei problemi