Belli bir işletim sisteminin sistem yazı tipini varsayılan olarak ayarlamak, performansı artırabilir çünkü tarayıcının herhangi bir yazı tipi dosyasını indirmesi gerekmez, zaten sahip olduğu bir dosyayı kullanır. Yine de bu, tüm "web uyumlu" yazı tipleri için geçerlidir. "Sistem" yazı tiplerinin güzelliği, mevcut işletim sisteminin kullandığı ile eşleşmesidir, bu nedenle rahat bir görünüm olabilir.
Bu sistem yazı tipleri nelerdir? Bu yazının yazıldığı tarihte, aşağıdaki gibi bozulur:
| işletim sistemi | Sürüm | Sistem Yazı Tipi |
|---|---|---|
| Mac OS X | El Capitan | San Francisco |
| Mac OS X | Yosemite | Helvetica Neue |
| Mac OS X | Mavericks | Lucida Grande |
| pencereler | Vista | Segoe kullanıcı arayüzü |
| pencereler | XP | Tahoma |
| pencereler | 3.1'den ME'ye | Microsoft Sans Serif |
| Android | Dondurmalı Sandviç (4.0) + | Roboto |
| Android | Cupcake'den (1.5) Honeycomb'a (3.2.6) | Droid Sans |
| Ubuntu | Tüm versiyonlar | Ubuntu |
Parçacığa gidin, şimdiden!
Önsözün nedeni, sistem yazı tiplerini desteklemek için ne kadar derine geri dönmeniz gerekebileceğini göstermesidir. Ek olarak, yeni sistem sürümleriyle birlikte yeni yazı tiplerinin geldiğini ve dolayısıyla yazı tipi yığınınızı güncellemeniz gerekebileceğini göstermeye yardımcı olur.
Yöntem 1: Öğe Düzeyindeki Sistem Yazı Tipleri
Chrome ve Safari, yakın zamanda aşağıdaki örneklerde "-apple-system" ve "BlinkMacSystemFont" yerine kullanılabilen genel bir yazı tipi ailesi olan "system-ui" yi piyasaya sürdü. Bilgi için JJ'e şapka ipucu.Sistem yazı tiplerini uygulamanın bir yöntemi, font-familyözelliği kullanarak onları doğrudan bir öğeye çağırmaktır .
GitHub, sitelerinde bu yöntemi kullanarak bodyöğeye sistem yazı tiplerini uyguluyor :
/* System Fonts as used by GitHub */ body ( font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; )Hem Medium hem de WordPress yöneticisi, hafif bir varyasyonla benzer bir yaklaşım kullanıyor, en önemlisi Oxygen Sans (GNU + Linux işletim sistemi için oluşturulmuş) ve Cantarell (GNOME işletim sistemi için oluşturulmuş) için destek. Bu pasaj ayrıca belirli emoji türleri ve semboller için desteği de bırakır:
/* System Fonts as used by Medium and WordPress */ body ( font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; )Not: Bu yöntem font-family, fontsteno yerine yalnızca mülk üzerinde kullanılmalıdır . Booking.com, önde gelen yazı tipinin bir satıcı öneki gibi görünmesi nedeniyle oluşturduğu uyarılar hakkında kapsamlı bir yazı yayınladı.
Yöntem 2: Sistem Yazı Tipi Yığınları
İlk yöntemin sınırlaması, bir öğede her kullanıldığında tüm font yığınını çağırmanız gerektiğidir ve bu, nerede ve nasıl kullanıldığına bağlı olarak hantal hale gelebilir ve kodunuzu şişirebilir.
Jonathan Neal, sistem yazı tiplerinin kullanıldığı alternatif bir yöntem sunar @font-face.
Buradaki avantaj, yazı tiplerini bir kez bildirebilmeniz ve ardından font-familyher seferinde uzun yazı tipi listesi yerine mülkte yapabileceğiniz şey haline gelmesidir .
/* Define the "system" font family */ @font-face ( font-family: system; font-style: normal; font-weight: 300; src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"); ) /* Now, let's apply it on an element */ body ( font-family: "system"; )Jonathan'ın tam örneğinin system, italik, kalın ve ek ağırlıkları hesaba katmak için yukarıdaki ön bilgide tanımlanan font ailesinin varyasyonlarını tanımlama yeteneğini gösterdiğine dikkat edin .
İlişkili
- CSS'de İşletim Sistemine Özgü Yazı Tipleri - kullanımdaki yazı tipini test etmek için bir JavaScript yöntemi içerir.
- SVG'de Sistem Yazı Tipleri
- Booking.com'da sistem yazı tiplerini uygulama - Alınan bir ders - Booking.com,
fontsteno üzerinde bir sistem yazı tipi yığını kullanarak nasıl öğrendiklerini paylaşıyor , beklendiği gibi çalışmıyor.