Sistem Yazı Tipini Kullanmak
[ Okuma süresi tahmini 2 dakikadır ]
Site Yazı Tipi
Sitenizde hemen hemen istediğiniz yazı tipini artık kolayca kullanabiliyorsunuz. Google Fonts ve benzer servisler sayesinde sayesinde yüzlerce yazı tipini deneyebilir, istediklerinizi kullanabilirsiniz.
Ancak bunun sitenizin hızına bir miktar etkisi olacaktır. Özellikle bir çok çeşit yazı tipi kullanmak isterseniz.
Sitenizin hızına hemen hiç etki etmeyecek yol ise, sistem yazı tiplerini kullanmak olacaktır.
Sitenizin yazıları iOS cihazlarda nasıl San Francisco fontu ile görünür yazımızda sitenizin San Francisco yazı tipi ile iOS cihazlarda görünmesi için gerekli CSS kodunu açıklamıştık.
system-ui Kullanımı
Şimdi ise yeni bir CSS yaklaşımı var.body {font-family:system-ui,sans-serif;}
Hepsi bu kadar. Artık siteniz iOS, Mac, Windows hangi sistemde görüntüleniyor ise o sistemin ön tanımlı fontu hangisi ise o yazı tipi ile görünecektir. Böylece fazladan yük getirmeden site yazı tipi meselesini halletmiş olacaksınız. CSS kodu da çok sadeleşmiş olacak.
Yakın gelecekte system-ui yazımının system şekline dönüşmesi ve standart hale gelmesi beklenmektedir.
Sistem Fontları
Belli başlı sistem fontlarını aşağıdaki gibi sıralayabiliriz.
| İşletim Sistemi | Sistem Yazı Tipi |
|---|---|
| Mac OS X, iOS | San Francisco |
| Windows | Segoe UI |
| Android | Roboto, Droid Sans |
| Ubuntu | Ubuntu |
Diğer Yazı Tipleri
Diğer yazı tiplerinden de kullanmak isterseniz, kod içine ekleyebilirsiniz. Ancak unutmayın, eklediğiniz yazı tiplerinde en soldan önem sırası yaratır.
Bizim kullandığımız kod şöyle;body {font-family:Roboto,system-ui,"Font Awesome 5 Free",sans-serif;}
Bunu Windows cihazlarda Roboto yüklüyse öncelikli kullanmasını istemek için yapıyoruz. Bizim cihazımızda yüklü.