Bu sayfa, Cloud Translation API ile çevrilmiştir.

@font-face üzerinden webfonts için hızlı rehber

Paul Irish

Giriş

Web yazı tiplerinin ne kadar esnek olduğunu görmek için Yazı Tipi Önizleme Aracı'na göz atın

CSS3'ün @font-face özelliği, web'de özel yazı tiplerini erişilebilir, değiştirilebilir ve ölçeklenebilir bir şekilde kullanmamıza olanak tanır. Ancak, "Cufon, sIFR ve resimlerde metin kullanmak istiyorsak neden @font-face ifadesini kullanalım?" diyebilirsiniz. Özel yazı tipleri için @font-face uzantısından yararlanmanın bazı avantajları:

Bul ile tam aranabilirlik (ctrl-F)
Ekran okuyucular gibi yardımcı teknolojilere erişilebilirlik
Metin, tarayıcı içi çeviri veya çeviri hizmetleriyle çevrilebilir
CSS, tipografik görünümde tam düzenleme yapabilir: line-height, letter-spacing, text-shadow, text-align ve ::first-letter ile ::first-line gibi seçiciler

@font-face özünde

En temelde, aşağıdaki gibi kullanılacak yeni bir özel uzak yazı tipi tanımlıyoruz:

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.ttf');
}

Ardından şu amaçlarla kullanabilirsiniz:

h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

Bu @font-face bildiriminde, yazı tipini açıkça adlandırmak için font-family özelliğini kullanıyoruz. Adı ne olursa olsun herhangi bir şey olabilir. font-family: 'SuperDuperComicSans';, sizin itibarınız için olmasa bile iyi sonuç verecektir. src özelliğinde, tarayıcının yazı tipi öğesini bulabileceği yere işaret ediyoruz. Tarayıcıya bağlı olarak, yazı tipi verilerinin tamamını satır içine yerleştiren eot, ttf, otf, svg veya veri URI'si geçerli bazı yazı tipi türleridir.

	otf ve ttf	svg	woff	Eot
IE	IE9		IE9	IE5 ve üstü
Firefox	FF3.5	FF3.5	FF3.6
Chrome	Chrome 4	Chrome 0.3	Chrome 5
Safari	3.1	3.1
Opera	Opera 10.00	Opera 9
iOS		iOS 1
Android	2,2

Elbette, hiçbir şey olması gerektiği kadar basit değildir. Yukarıdaki kodun ilk sınırlaması, IE 6-8'e bir EOT sunmamasıydı. Bu sorunu çözmek için kurşun geçirmez @font-face söz dizimi önerdi. Bunun için etkili bir örnek verilebilir.

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.eot'); /* IE 5-8 */ 
  src: local('&#9786;'),             /* sneakily trick IE */
        url('tagesschrift.woff') format('woff'),    /* FF 3.6, Chrome 5, IE9 */
        url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
        url('tagesschrift.svg#font') format('svg'); /* iOS */
}

Yazı tipi sincap oluşturma aracı — Squirrel Yazı Tipi oluşturma aracı

Siz hâlâ baş ağrısına neden oluyor musunuz? Bunu hızlı bir şekilde hayata geçirmek isterseniz Font Squirrel oluşturma aracına gidin. Bu araç, yazı tipinizi alıp varyasyonlarını ve CSS'sini sizin yerinize hazırlayarak süreci sizin için basitleştirir. Günümüzde web yazı tiplerinin pratikte kullanılabilmesi için vazgeçilmez bir araç.

Mobil destek mi?

Mobil Safari, iOS 3.1'den itibaren SVG web yazı tiplerini, Android ise 2.2 sürümünden itibaren otf/ttf'yi destekler. Peki mobil kullanıcılarınız bu gelişmiş tipografik deneyimi yaşamalı mı? En önemli neden, WebKit'in @font-face üzerinden özel bir yazı tipi bekleyen metni işleme şeklidir: metin görünmezdir. Yani düşük bant genişliğine sahip bir mobil bağlantıda, kullanıcılarınız yaklaşık 50 bin yazı tipi verisi yüklenene kadar metin görmez. Webkit ekibi, birkaç saniye dolduktan sonra yedek yazı tipini etkinleştirmek için bir çözüm üretmeye çalışıyor. Ancak bu çözüm gerçekleşene kadar, kullanıcılarınızı içeriğiniz ile aralarındaki bu tür engellere maruz bırakmanın adil olmadığını düşünüyorum.

Web yazı tipi hizmetleri

Bazı hizmetler, @font-face özelliğini kolay bir API'yle sarmalar. Çoğu zaman HTML'nize tek bir CSS veya komut dosyası satırı ve bazı yapılandırmalar eklemenizi sağlar. WebInk, Typekit ve Fontslive gibi birçok araç, yazı tiplerini (bazen bant genişliği sınırına kadar) aylık bir ücret karşılığında kullanmanıza olanak tanır. Bu hizmetleri kullanmak, farklı tarayıcılara yönelik çözüm sunmanın bazı zorluklarını ortadan kaldıran geliştiriciler için çok kullanışlıdır.

Google Font API, bir stil sayfasına bağlanıp tarayıcılar arası ve performans sorunlarını Google'ın halletmesine izin vererek, ücretsiz olarak lisanslanmış küçük bir dizi yazı tipini kullanmanıza olanak tanır. İşe koyulmanın ve webfonts ile çalışmaya başlamanın en hızlı yoludur.

@font-face için profesyonel yazı tipleri bulma

Tasarımcılar açısından en yaygın sürprizlerden biri, yazı tipi lisansı satın almanız (örneğin, grafik tasarımınızda kullanmak için), bunu @font-face alanında kullanabileceğiniz anlamına gelmez. @font-face (veya web yerleştirme) lisansları genellikle ayrı olarak satılır. Sözleşmeyi dikkatlice okuyun ve sorularınız varsa yazı tipi firmasıyla iletişime geçin. Fontspring, hepsi @font-face ile kullanıma uygun yüzlerce kaliteli profesyonel yazı tipi satan bir yazı tipi butiğidir. FontFont ve diğer dökümhaneler, doğrudan @font-face lisansları satmaya başladılar, ancak şu anda yalnızca WOFF ve EOT hedefleniyor ve bu da tarayıcı pazarının büyük (ancak küçülen) bir kısmını dışarıda bırakıyor. Birçok dökümhane kataloglarına web yazı tipi lisansları ekliyor, ancak seçtiğiniz yazı tipine uygun bir web yazı tipi lisansı bulamıyorsanız, bu konuda soru sormak için kendileriyle iletişime geçin.

FOUT ile başa çıkma

Stilsiz Metnin Flash'ı, Firefox ve Opera'da az sayıda web tasarımcısının hoşuna giden bir olgudur. @font-face üzerinden özel bir yazı tipi uyguladığınızda, sayfa yüklenirken yazı tipinin henüz indirilip uygulanmadığı ve font-family yığınındaki bir sonraki yazı tipinin kullanıldığı kısa bir an olur. Bu durum, yeni sürüme geçirilmeden önce farklı (genellikle daha az iyi görünen) bir yazı tipinin yanıp sönmesine neden olur.

ALT_TEXT_HERE — HTML5 Slayt kümesini içeren Stilsiz Metin Flash'ı.

Google Font API'sine eşlik eden WebFont Loader, yükleme işlemi üzerinde size yüksek düzeyde kontrol sağlayan çok sayıda etkinlik kancası sağlamayı amaçlayan bir JavaScript kitaplığıdır. Diğer tarayıcıların WebKit'in @font-face yazı tipi yüklenirken yedek metni gizleme davranışını taklit etmesini nasıl sağlayabileceğinize bir göz atalım.

<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
  custom: {
    families: ['Tagesschrift'],
    urls: ['http://paulirish.com/tagesschrift.css']
  }
});
</script>

/* we want Tagesschrift to apply to all h2's */
.wf-loading h2 {
  visibility: hidden;
}
.wf-active h2, .wf-inactive h2 {
  visibility: visible;
  font-family: 'Tagesschrift', 'Georgia', serif;
}

JavaScript devre dışı bırakılırsa metin her zaman görünür olur ve bir şekilde yazı tipi hataları görünürse güvenli bir şekilde temel serif yazı tipine döner. Bunu şimdilik geçici bir önlem olarak düşünün; çoğu web yazı tipi uzmanı, yedek metni 2-5 saniye sakladıktan sonra açığa çıkarmayı ister. Düşük bant genişliği ve mobil cihazlar bu zaman aşımından büyük yarar sağlar. Doğal olarak, Mozilla bu durumu en kısa sürede düzeltmek için çalışıyor.

Şu anda yalnızca Firefox'ta desteklenen font-size-adjust özelliği, daha hafif ancak daha az etkili bir çözümdür. Size bir yazı tipi yığınındaki x-height değerini normalleştirme fırsatı verir, böylece FOUT'taki görünür değişiklik miktarını azaltır. Aslında, Yazı Tipi Sincap oluşturucu'ya yeni bir özellik ekledik. Bu özellik, yüklediğiniz yazı tiplerinin x yükseklik oranını bildirir ve böylece font-size-adjust değerini doğru şekilde ayarlayabilirsiniz.

Özet

Webfonts, tasarımcılara büyük ölçüde özgürlük sunar ve seçimsel bağ ve stil alternatifleri gibi yakında kullanıma sunulacak özelliklerle çok daha fazla esnekliğe sahip olacak. Dağıtılan tarayıcıların% 98'ini kapsadığından şimdilik CSS3'ün bu bölümünü uygularken içiniz rahat olsun. Keyfini çıkarın!