@font-faceKuralının, özel yazı tipleri, bir web sayfasında yüklenmesine izin verir. Bir stil sayfasına eklendikten sonra kural, tarayıcıya yazı tipini barındırıldığı yerden indirmesi ve ardından CSS'de belirtildiği gibi görüntülemesi talimatını verir.
Kural olmadan, tasarımlarımız, kullanılan sisteme bağlı olarak değişen, bir kullanıcının bilgisayarına zaten yüklenmiş olan yazı tipleriyle sınırlıdır. İşte mevcut sistem yazı tiplerinin güzel bir dökümü.
Olası En Derin Tarayıcı Desteği
Şu anda mümkün olan en derin desteğe sahip yöntem budur. @font-faceKural herhangi stilleri önce biçembente eklenmelidir.
@font-face ( font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ )Ardından, aşağıdaki gibi öğeleri biçimlendirmek için kullanın:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Pratik Tarayıcı Desteği Seviyesi
İşler büyük ölçüde WOFF ve WOFF 2'ye doğru kayıyor, bu yüzden muhtemelen paçayı sıyırabiliriz:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5.1+ | 3.6+ | 11.50+ | 9+ | 4.4+ | 5.1+ |
Biraz Daha Derin Tarayıcı Desteği
Tam destek ve pratik destek arasında mutlu bir ortama ihtiyacınız varsa, bu birkaç temeli daha kapsayacaktır:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); )| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 3.5+ | 3+ | 3.5+ | 10.1+ | 9+ | 2.2+ | 4.3+ |
Süper Aşamalı Tarayıcı Desteği
Çiftliği WOFF üzerinde tutuyorsak, o zaman işlerin bir noktada WOFF2'ye kaymasını bekleyebiliriz. Bu, kanayan kenarda yaşayabileceğimiz anlamına gelir:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Hayır | 35+ bayraklı | 23+ | Hayır | 37 | Hayır |
Alternatif Teknikler
@import
@font-faceKendi sunucularımızda barındırılan yazı tipleri için mükemmel olsa da , barındırılan bir yazı tipi çözümünün daha iyi olduğu durumlar olabilir. Google Yazı Tipleri bunu yazı tiplerini kullanmanın bir yolu olarak sunar. Aşağıda, @importOpen Sans yazı tipini Google Fonts'tan yüklemek için kullanmanın bir örneği verilmiştir :
@import url(//fonts.googleapis.com/css?family=Open+Sans);Daha sonra onu öğeleri biçimlendirmek için kullanabiliriz:
body ( font-family: 'Open Sans', sans-serif; )Yazı tipinin URL'sini açarsanız, aslında @font-faceperde arkasında yapılan tüm işleri görebilirsiniz .
Barındırılan bir hizmeti kullanmanın bir yararı, tüm yazı tipi dosyası varyasyonlarını içerme olasılığının olmasıdır, bu da tüm bu dosyaları kendimiz barındırmak zorunda kalmadan derin çapraz tarayıcı uyumluluğu sağlar.
CodePen'de CSS-Tricks (@ css-tricks) tarafından özel yazı tipleri için @import Kullanan Kalem bölümüne bakın.
bir stil sayfası oluşturmak
Benzer şekilde, başka herhangi bir CSS dosyasında yaptığınız gibi aynı varlığa CSS yerine HTML belgesinde de bağlanabilirsiniz . Google Fonts'taki aynı örneği kullanırsak, bunu kullanırdık:
Ardından, öğelerimizi diğer yöntemler gibi biçimlendirebiliriz:
body ( font-family: 'Open Sans', sans-serif; )Yine, bu @font-facekuralların içe aktarılmasıdır, ancak bunları stil sayfamıza eklemek yerine, bunun yerine HTML’imize eklenirler .
CodePen'de CSS-Tricks (@ css-tricks) tarafından özel yazı tipleri için Kalem Kullanımı konusuna bakın.
Yaklaşık aynı şey… her iki teknik de gerekli varlıkları indiriyor.
Yazı Tipi Dosya Türlerini Anlamak
Bu yazının üst kısmındaki orijinal snippet, garip uzantılara sahip birçok dosyaya atıfta bulunuyor. Her birini gözden geçirelim ve ne anlama geldiklerini daha iyi anlayalım.
WOFF / WOFF2
Açılımı: Web Açık Yazı Tipi Biçimi.
Web'de kullanılmak üzere oluşturulan ve Mozilla tarafından diğer kuruluşlarla birlikte geliştirilen WOFF yazı tipleri, OpenType (OTF) ve TrueType (TTF) yazı tipleri tarafından kullanılan yapının sıkıştırılmış bir sürümünü kullandıklarından genellikle diğer biçimlerden daha hızlı yüklenir. Bu format, yazı tipi dosyasında meta verileri ve lisans bilgilerini de içerebilir. Bu format kazanan ve tüm tarayıcıların gittiği yer gibi görünüyor.
WOFF2, yeni nesil WOFF'tur ve orijinalinden daha iyi sıkıştırmaya sahiptir.
SVG / SVGZ
Standlar: Ölçeklenebilir Vektör Grafikleri (Yazı Tipi)
SVG, yazı tipinin bir vektör yeniden oluşturulmasıdır, bu da yazı tipini dosya boyutunda çok daha hafif hale getirir ve ayrıca mobil kullanım için idealdir. Bu biçim, iOS için Safari'nin 4.1 ve önceki sürümlerinde izin verilen tek biçimdir. SVG yazı tipleri şu anda Firefox, IE veya IE Mobile tarafından desteklenmemektedir. Firefox, WOFF'a odaklanmak için uygulamayı süresiz olarak erteledi.
SVGZ, SVG'nin sıkıştırılmış sürümüdür.
EOT
Standlar: Gömülü Açık Tip.
Bu format Microsoft (özgün yenilikçileri @font-face) tarafından oluşturulmuştur ve yalnızca IE tarafından desteklenen özel bir dosya standardıdır. Aslında, IE8 ve aşağısının kullanırken tanıyacağı tek format budur @font-face.
OTF / TTF
Açılımı: OpenType Yazı Tipi ve TrueType Yazı Tipi.
WOFF formatı başlangıçta OTF ve TTF'ye bir tepki olarak yaratıldı, çünkü bu formatlar kolayca (ve yasadışı olarak) kopyalanabilirdi, ancak OpenType birçok tasarımcının ilgilenebileceği yeteneklere sahiptir (bitişik harfler ve benzeri).
Performans Üzerine Bir Not
Web yazı tipleri tasarım için harikadır, ancak web performansı üzerindeki etkilerini de anlamak önemlidir. Özel yazı tipleri, genellikle sitelerin performans açısından darbe almasına neden olur çünkü yazı tipi görüntülenmeden önce indirilmelidir.
Yaygın bir belirti, yazı tiplerinin önce yedek olarak yüklendiği ve ardından indirilen yazı tipine yanıp söndüğü kısa bir andı. Paul Irish'in bu konuda daha eski bir yazısı var ("FOUT": Flash Of Unstyled Text).
Bu günlerde, tarayıcılar genellikle metni varsayılan olarak özel yazı tipi yüklenmeden önce gizlemektedir. İyi ya da kötü? Sen karar ver. Çeşitli tekniklerle bunun üzerinde bir miktar kontrol uygulayabilirsiniz. Bu makale için biraz kapsam dışı, ancak işte Zach Leatherman'ın tavşan deliğine başlamanıza yardımcı olacak üç makalesi:
- Font Yükleme Olayları ile daha iyi @ font-face
- Web yazı tiplerini sorumlu bir şekilde veya @ font-face-palm'den kaçınarak nasıl kullanıyoruz?
- Sahte Metin Flaşı - Yazı Tipi Yüklemede daha fazlası
Özel yazı tiplerini uygularken göz önünde bulundurulması gereken bazı noktalar:
Dosya boyutunu izleyin
Yazı tipleri şaşırtıcı derecede ağır olabilir, bu nedenle daha hafif sürümler sunan seçeneklere eğilin. Örneğin, 400 KB olan bir yazı tipi kümesine karşı 50 KB olan bir yazı tipi kümesini tercih edin.
Mümkünse karakter kümesini sınırlayın
Bir yazı tipi için gerçekten kalın ve siyah ağırlıklara ihtiyacınız var mı? Yazı tipi kümelerinizi yalnızca kullanılanları yüklemeye sınırlamak iyi bir fikirdir ve burada bununla ilgili bazı iyi ipuçları vardır.
Küçük ekranlar için sistem yazı tiplerini düşünün
Birçok cihaz berbat bağlantılara takılıyor. Özel yazı tipini kullanarak yüklerken daha büyük ekranları hedeflemek bir numara olabilir @media.
Bu örnekte, 1000 pikselden küçük ekranlara bunun yerine bir sistem yazı tipi sunulacak ve geniş ve daha büyük ekranlara özel yazı tipi sunulacaktır.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Yazı Tipi Hizmetleri
Yazı tiplerini barındıracak ve ticari olarak lisanslı yazı tiplerine erişim sağlayacak bir dizi hizmet vardır. Bir hizmeti kullanmanın faydaları, genellikle verimli bir şekilde teslim edilen çok sayıda yasal yazı tipine (örneğin, onlara hızlı bir CDN'de hizmet vermek) kadar gelir.
İşte birkaç barındırılan yazı tipi hizmeti:
- Bulut Tipografi
- Typekit
- Fontdeck
- Web türü
- Yazı tipi bahar
- Typotheque
- Fonts.com
- Google Yazı Tipleri
- Yazı Tipi Sincap
Ya Simge Yazı Tipleri?
Doğru, @ font-face, bir simge sistemi için kullanılabilecek simgelerle dolu bir yazı tipi dosyası yükleyebilir. Bununla birlikte, SVG'yi bir simge sistemi olarak kullanmaktan çok daha iyi olduğunuzu düşünüyorum. İşte iki yöntemin bir karşılaştırması.
Daha fazla kaynak
- Google Yazı Tipi API'sinin Temelleri
- CSS Yazı Tipi Aileleri