CSS Font Stack Oluşturucu — CJK Yedekli Sistem Yazı Tipi Yığınları

Bu araç ne işe yarar

CSS Font Stack Oluşturucu, ziyaretçilerinizin cihazlarında zaten yüklü olan yazı tiplerinden yapıştırmaya hazır bir font-family değeri oluşturur. Yerel sistem arayüzü yazı tipi, Inter ve Helvetica gibi bir neo-grotesk, Charter gibi bir geçiş dönemi serif ya da koda uygun eş aralıklı bir yazı tipi gibi bir stil seçin; araç her platformdaki en iyi yazı tipini doğru sırayla listeler.

Yığınlar, bilinen Modern Font Stacks koleksiyonunu temel alır; buna ek olarak pek çok sitenin hâlâ kullandığı klasik -apple-system, BlinkMacSystemFont, "Segoe UI" yığını da vardır. Basitleştirilmiş Çince, Geleneksel Çince, Japonca, Korece, Arapça, Tayca veya Hintçe metin için yedek yazı tipleri ve sona renkli emoji yazı tipleri ekleyebilirsiniz.

Nasıl kullanılır

Bir Yazı tipi yığını seçin. Soldaki önizleme, şu anda kullandığınız cihazda nasıl göründüğünü gösterir; kendi kelimelerinizi denemek için metnini düzenleyebilirsiniz.
Sayfalarınız Çince, Japonca, Korece, Arapça, Tayca veya Hintçe metin içeriyorsa Diğer yazı sistemleri için yazı tipleri seçeneğini belirleyin.
Emoji yazı tiplerini ekle seçeneğini açın veya kapatın.
Bir Çıktı seçin: düz bir font-family bildirimi, bir CSS özel özelliği, bir Tailwind fontFamily girdisi veya düz bir liste.
Sonucu kopyalayın veya .css dosyası olarak indirin.

Boşluk içeren veya rakamla başlayan adlar otomatik olarak tırnak içine alınır; system-ui ve sans-serif gibi CSS anahtar sözcükleri ise asla tırnağa alınmaz, çünkü tırnak içine almak onları var olmayan yazı tipi adlarına dönüştürür.

Örnek

Basitleştirilmiş Çince yedekleriyle sistem arayüzü:

font-family: system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

İpuçları

Gövde metni için bir yığın, kod için de eş aralıklı bir yığın kullanın: iki sistem yığınının yükleme maliyeti sıfırdır.
Önizleme kendi cihazınızda yüklü yazı tiplerine bağlıdır; bu yüzden sayfayı Windows’ta ve bir telefonda da kontrol edin.
İleride bir web yazı tipi eklerseniz onu listenin başına koyun ve sistem yığınını yedek olarak tutun.

SSS

› Font stack (yazı tipi yığını) nedir?

CSS font-family özelliğindeki yazı tipi ailelerinin listesidir. Tarayıcı, cihazda yüklü olan ilk yazı tipini kullanır, yoksa bir sonrakine geçer ve liste sans-serif gibi genel bir aileyle biter.

› Neden Çince, Japonca veya Korece yazı tipleri eklemeliyim?

Inter veya Charter gibi Batı yazı tiplerinde CJK glifleri bulunmaz. Genel aileden önce PingFang SC, Microsoft YaHei veya Noto Sans SC listelemek, Çince metnin sistemin rastgele seçtiği bir yazı tipi yerine stile uyan bir yazı tipiyle görüntülenmesini sağlar. Aynısı Arapça, Tayca ve Hintçe (Devanagari) için de geçerlidir. Rusça, Ukraynaca, Yunanca, Vietnamca, Türkçe, Lehçe ve Latin ya da Kiril alfabesiyle yazılan diğer diller için ek bir şey gerekmez: Her yığındaki sistem ve Noto yazı tipleri bunları zaten kapsar.

› Emoji yazı tipleri neden sans-serif'ten sonra listeleniyor?

Emoji yazı tipleri yalnızca emojileri kapsar. Onları en sona koymak, sıradan harflerin ve rakamların asla bir emoji yazı tipiyle görüntülenmemesini sağlarken emojilerin her platformda renkli gliflerle gösterilmesini korur.

› Bu yığınlar web yazı tipi indirmeyi gerektiriyor mu?

Hayır. Her yığın Windows, macOS, iOS, Android veya yaygın Linux dağıtımlarıyla birlikte gelen yazı tiplerini kullanır; bu sayede sayfalar sıfır yazı tipi isteğiyle yüklenir.