Görsel CSS Metin Anahattı & Stroke Generator

Metne 1–10 px aralığında -webkit-text-stroke konturu verin; renkli dolgusuz örnek stili önizleyin ve tarayıcıda sınayın.

Bu aracın ana girdisi tarayıcınızda işlenir ve harici API’ye gönderilmez. Yazı tipi ve arayüz dosyaları harici sağlayıcılardan yüklenebilir.

YULATOOLS · KULLANIM REHBERİ

Görsel CSS Metin Anahattı & Stroke Generator

Text stroke aracı, kontur kalınlığını 1–10 px arasında ve rengini seçerek `-webkit-text-stroke` CSS bildirimi üretir. Önizleme dolgu rengi şeffaf olan örnek metinde çizgi kalınlığını ve tonunu gösterir.

Bu stil tek başına metnin içini doldurmaz; koyu veya yoğun arka plan üzerinde kontur yeterli okunurluk sağlamayabilir. Özellik adı webkit prefix'i taşır ve görünüm font ağırlığı, harf biçimi ve tarayıcıya göre değişebilir; normal renkli metin fallback'i ekleyin.

Hangi durumlarda kullanılır?

  • Poster başlığında harf çevresine belirgin kontur eklemek.
  • Dolu olmayan tipografi görünümünü farklı genişliklerde karşılaştırmak.

Nasıl kullanılır?

  1. Kontur kalınlığını 1–10 px arasında seçin.
  2. Renk seçiciden stroke rengini belirleyip örnek metni inceleyin.
  3. CSS bildiriminin yanına okunabilir bir dolgu/fallback stili ekleyin ve hedef tarayıcılarda test edin.

Örnek

Girdi: Kalınlık: 2 px; renk: #fbbf24

Çıktı: -webkit-text-stroke: 2px #fbbf24; color: transparent;

Kimler için?

  • Tipografi ve afiş tasarımcıları
  • CSS başlık efektleri geliştirenler
  • Kontur görünümü prototipleyen ön yüz geliştiricileri

Gizlilik ve sınırlar

Seçilen renk ve kalınlık tarayıcıda CSS'e çevrilir; değerler API'ye gönderilmez. Araç tarayıcı uyumluluğu, metin kontrastı veya fallback görünümünü test etmez.

Sık sorulan sorular

Kontur kalınlığı kaç piksel olabilir?

Kontrol 1 ile 10 piksel arasında değer üretir. Büyük kalınlık iç boşluğu daraltabilir; gerçek fontta gözle kontrol edin.

Neden text fill transparent?

Örnek stil yalnız dış çizgiyi göstermek üzere metin dolgusunu şeffaf yapar. Uygulamanızda gerekirse `color` değerini ayrıca ayarlayın.

Her tarayıcıda aynı görünür mü?

Tarayıcı, font ve `-webkit-text-stroke` desteği sonucu etkiler. Desteklenmeyen durumda okunur metin kalması için normal renkli fallback tanımlayın.

Bu efekt erişilebilir mi?

Kontur tek başına yeterli kontrastı garanti etmez. Metni gerçek arka plan üzerinde okuyun ve gerektiğinde düz dolgu rengi sağlayın.