Kendi barındırdığınız yazı tipleri ve biçimlendirme

Bu kılavuz neleri kapsar?

.ttf, .otf veya .woff2 dosyalarını kendiniz nasıl barındırırsınız (Google veya sistem yazı tipi gerekmez).
Bu yazı tiplerini şu sayfalarda yükleme: dock.html veya featured.html URL parametreleri veya OBS özel CSS'si kullanarak.
Her iki sayfada metin boyutunu ve düzenini hangi CSS değişkenlerinin ayarladığı.
Google Fonts veya kurulu sistem yazı tiplerini kullanmayı sürdürmek istiyorsanız hızlı alternatifler.

Aynı featured.html katmanı, şu ayar &googlefont=Pacifico uygulanmış hâli; kendi barındırdığınız yazı tipleri de şu parametreyle aynı şekilde çalışır: @font-face.

1) Yazı tipi dosyalarınızı barındırın

Yazı tipi dosyasına doğrudan bir HTTPS bağlantısı gerekir. OBS veya uygulama içindeki tarayıcının dosyayı alabilmesi için doğrudan bağlantılara/CORS'a izin veren bir sunucu seçin.

Hızlı seçenekler: catbox.moe, 0x0.st, file.io (kısa ömürlü).
Kalıcı seçenekler: GitHub Pages, Cloudflare Pages, Netlify, kendi web sunucunuz.
Yalnızca yeniden dağıtma lisansınız olan yazı tiplerini barındırın. WOFF2 dosyaları mevcutsa TTF/OTF'den daha küçüktür ve daha hızlı yüklenir.

2) CSS'yi oluşturun

Yazı tipini şu kuralla tanımlayın: @font-face ve barındırdığınız dosyayı gösterin; ardından katmanı şu değişkenle onu kullanacak şekilde ayarlayın: --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;
}

Birden fazla yazı tipi mi gerekiyor (Ermenice + Rusça + Latin için)? Her font-face'i tanımlayın ve şurada listeleyin: --font-family örneğin 'FontA', 'FontB', 'FontC', sans-serif. Bir glif eksikse tarayıcı otomatik olarak yedek yazı tipine geçer.

3) dock.html veya featured.html sayfasına uygulayın

OBS Tarayıcı Kaynağı: OBS > Tarayıcı Kaynağı > Özel CSS bölümünde panel/öne çıkan mesaj URL'nizi açın ve yukarıdaki CSS bloğunu yapıştırın.

URL parametresi (barındırılan CSS): CSS'yi yazı tiplerinizle aynı sunucuya yükleyin, ardından şunu ekleyin: &css=https://your-site.example/my-font.css sayfa URL'sine:

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

Satır içi URL parametresi: Hızlı testler için CSS'yi doğrudan şu parametreyle iletebilirsiniz: &css= veya şu parametreyle base64 olarak kodlayabilirsiniz: &b64css= (her iki sayfa da bunları destekler).
Hızlı yazı tipi geçişleri: &font=YourInstalledFont bir sistem yazı tipi adı kullanır; şu ise &googlefont=Noto+Sans+Armenian,Noto+Sans kendiniz barındırmayı tercih etmiyorsanız Google Fonts'u yükler.

Bu seçenekler Chrome uzantısında, Electron uygulamasında ve barındırılan sitede aynı şekilde çalışır; çünkü hepsi aynı dock.html/featured.html dosyalarını yükler.

4) Katman metnini ayarlayın

Her iki sayfanın kullandığı temel tipografi değişkenleri:

: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;
}

Yalnızca Panel için ek seçenekler: --stylized-emoji, --stylized-img, --text-stroke-width, --text-shadow, ve satır renkleri (--highlight-base, --highlight-base2, ayrıca compact varyantları).

Öne çıkan mesaj düzeni ayarları: ayarlayın: --comment-width, --comment-padding, --comment-area-bottom, ve --comment-area-height HTML'yi düzenlemeden alt bant bloğunu yeniden konumlandırmak için.

CSS değişikliklerini şu gibi mevcut URL seçenekleriyle birleştirin: &scale, &compact, veya &hidesource panelde düzen ayarları gerektiğinde.

5) Sorun giderme