İkon Fontları 101

İkon fontları, gliflerin — normalde harf ve rakamların — piktografik sembollerle değiştirildiği yazı tipleridir. "A" harfini oluşturmak yerine, bir ikon fontu ev ikonu, arama büyüteci veya alışveriş sepeti görüntüler.

İkonlar bir font dosyasının içinde bulunduğundan, tıpkı metin gibi davranırlar. font-size ile herhangi bir boyuta ölçeklenebilir, color ile renkleri değiştirilebilir, metin gölgeleri eklenebilir, CSS geçişleri uygulanabilir ve hatta animasyon eklenebilir — tek bir görüntü dosyasına dokunmadan.

Bu yaklaşım birçok pratik avantaj sağlar:

• Çözünürlükten bağımsızlık — vektör konturları her ekran yoğunluğunda keskin şekilde ölçeklenir
• Küçük boyut — bir sıkıştırılmış font dosyası düzinelerce ayrı görsel kaynağın yerini alır
• CSS kontrolü — renk, boyut, gölge, opaklık ve üzerine gelme durumları metin stillemesiyle ücretsiz gelir
• Tek HTTP isteği — tüm ikon seti tek bir ağ gidiş-dönüşünde yüklenir

Erken web döneminde geliştiriciler bireysel görüntülere veya CSS görüntü spritelarına — her ikonun sabit dikdörtgen bir bölge kapladığı büyük bileşik görüntülere — güveniyordu. Spriteler HTTP isteklerini azaltıyordu ancak kırılgandı: bir ikon eklemek veya yeniden boyutlandırmak, tüm sprite sayfasını yeniden oluşturmak ve piksel ofsetlerini elle güncellemek anlamına geliyordu.

2012 civarında Font Awesome ve IcoMoon gibi projeler daha temiz bir alternatifi popüler hale getirdi: ikonları Unicode'un Özel Kullanım Alanı'na eşlenmiş font glif'leri olarak paketlemek. Tasarımcılar tek bir @font-face bildirimi değiştirerek tüm ikon setini değiştirebilir, geliştiriciler ise ikonları zaten metin için kullandıkları CSS ile stilleyebilirdi. Bu teknik hızla yayıldı ve tek renkli ikonografi kullanan tasarım sistemleri için güvenilir, düşük maliyetli bir seçenek olarak kalmaya devam ediyor.

"İkon fontları vs satır içi SVG" tartışması on yılı aşkın bir süredir ön uç tartışmalarının vazgeçilmez bir unsuru olmuştur. Her iki yaklaşım da geçerlidir — doğru seçim projenizin gereksinimlerine bağlıdır.

İkon Fontları

• Tek HTTP isteği — bir font dosyası her ikonu içerir
• Son derece basit CSS stillemesi — herhangi bir metin gibi color, font-size ve text-shadow'u değiştirin
• Yalnızca tek renk — her gliph tek bir dolgu rengini destekler
• Kolay entegrasyon — bir stil sayfası bağlantısı ekleyin, CSS sınıfı kullanın, bitti

Satır içi SVG

• Çok renkli — her yol kendi dolgusu, kontuру veya gradyanı olabilir
• Varsayılan olarak erişilebilir — <title> ve aria-label ekran okuyuculara gerçek semantik sağlar
• Ayrı ayrı önbelleğe alınabilir — kullanılmayan ikonlar hiçbir zaman indirilmez
• İnce taneli kontrol — bireysel yolları canlandırın, element başına filtre uygulayın

SVG Spriteleri

• Birden fazla SVG'yi tek bir <symbol> sprite sayfasında birleştirir
• İkonlara <use href="#icon-name"> ile başvurulur
• Her ikisinin de avantajlarını sunar — tek istek, çok renk, erişilebilir — ancak daha karmaşık bir derleme hattı gerektirir

İkon fontları, her biri farklı sıkıştırma, tarayıcı desteği ve kullanım durumlarına sahip beş dosya formatında paketlenebilir. İşte kısa bir karşılaştırma:

Hangi formatları dahil edeceğinizden emin değil misiniz? Bu pratik karar kılavuzunu kullanın:

• Yalnızca bir tane seçecekseniz — WOFF2 kullanın. En iyi sıkıştırmayı (Brotli) sunar ve tarayıcıların 97%+'ını kapsar.
• IE 11 desteğine ihtiyacınız varsa — WOFF2 + WOFF kullanın. WOFF, Brotli kod çözme desteği olmayan kalan tarayıcıları kapsar.
• IE 8 desteğine ihtiyacınız varsa — WOFF2 + WOFF + EOT kullanın. EOT, Internet Explorer 6-8 tarafından anlaşılan tek formattır.
• Masaüstü uygulamaları için — TTF kullanın. Windows, macOS ve Linux'ta işletim sistemi düzeyinde font oluşturma için yerel formattır.
• Font sorunlarını hata ayıklamak için — SVG Font'u inceleyin. XML yapısı insan tarafından okunabilir olduğundan gliph yollarını ve meta verileri doğrulamak kolaydır.

Her formatın iç yapısını, tarayıcı uyumluluğunu ve en iyi uygulamalarını anlamak için daha ayrıntılı inceleyin:

Bu formatları projelerinizde nasıl kullanacağınızı öğrenin: