YuvarlakDünya

Yuvarlak Dünya, ne kadar yuvarlak birde bizim açımızdan bakın

Genel

Sistem Yazı Tipi ve Özellikleri

Blog sitelerinde kullanılan yazı tipi kodları, blog sayfalarının yüklenmesini geciktiren en önemli unsurlardan biri.Bu yazımızda Github gibi sitelerin kullanmış olduğu CSS sistem yazı tipi kodunu blog sitesine nasıl ekleneceğini ve özellikleri hakkında bilgiler paylaşacağım.Google font bağlantılarının yüklenmesini erteleme ve CSS oluşturulmasını engelleyen problemleri ortadan kaldırmak için birçok çözüm yolu denendi. Ama yine de sayfa yüklenme hızını etkileyen sorunlar giderilemedi. Tüm tarayıcılar ve mobil cihazlar da dahil tüm cihazların yazı tipine uyum sağlayabilen, harici CSS kodu bağlantısı kullanmadan muhteşem bir yazı tipi sahip olmak imkansız gibi bir durumdu.Blog sayfalarının daha hızlı yüklenmesi için Arial, Georgia, Helvetica, Times New Roman ve diğer web güvenli yazı tipi sistemlerini kullanılabilir. Fakat bu yazı tipleri de bir çok blogcu tarafından beğenilmiyor veya zevkine uymuyor.Bir sitede maksimum 50000byte CSS kod boyutu kullanılması önerilmekte. CSS kullanma sınırlamalarından başlayarak, CSS boyutunu küçülterek sitenin CSS boyutunu azaltmak için birçok çözüm yolu aramaya çalışıyoruz.CSS , bir tür yazı tipi ve bir yazı tipi kalınlığını kullandığımızda oldukça fazla boyutta olabiliyor. Bu yazımızda paylaştığımız yazı tipi sistemi hem CSS boyutunu azaltmak hemde yazı tipi bağlantılarının veya Google yazı tipi bağlantılarının kullanılmasından engelleme oluşturmayı kaldırmanın bir yoludur.Yukarıda da söylediğim gibi yazı tipi sistemini Github ve Bootstrap gibi diğer büyük web siteleri kullanmakta. Ancak, blog geliştiricilerinin ve blog yazarlarının çok aşina olduğu bir konu değil.Yazı tipi sistemi font-family kodunu aşağıdaki gibi blog sitenize eklediğinizde H ve B etiketleri gibi diğer etiketler için, yazı boyutu ve kalınlığını ayarlamak için font-size ve font-weight ögeleri ekleyerek ayarlayabilirsiniz. Blogger Sitelerine Sistem Yazı Tipi Nasıl Eklenir?Blogger hesabınızda oturum açın ve eklemek istediğiniz blogunuz kumanda panelinde bulunan Tema > HTML’i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın. Sistem yazı tipi kodunu blogunuza eklemeden önce lütfen blog şablonunuzu yedekleyin.Şablon CSS kodlarınız arasında bulunan aşağıdaki benzer CSS kodu bulun. Kod içerisinde ve diğer tüm CSS ögesi kodlarınız içerisinde bulunan font-family kodu kaldırın/silin. font-family (Örnek)bodyAşağıdaki sistem yazı tipi kodunu, blogunuzun şablon CSS kodları arasında bulmuş olduğunuz yukarıdaki örnek koda benzer kodun bir satır üzerine ekleyin. Blogger Sistem Yazı Tipi KodubodySistem yazı tipi uygulamasının çalışması için, blog şablon kodlarınız arasında bulunan bağlantılarının tümünü kaldırın.font-size: Yazı boyutunu ayarlamak için kullanılan CSS kodu. font-size.post h2font-weight: Yazı tipi kalınlığını ayarlamak için kullanılan CSS kodu. font-weight.post h2.post em.post-body.post b.post h2.post h1GitHub sitesi şuan aşağıdaki sistem yazı tipi kodunu kullanmakta. Aşağıdaki kod hem örnek hem de kaynak göstermek amaçlı ekledim. GitHub Sistem Yazı Tipibody Sistem yazı tipi, tarayıcı, kullanıcının kullandığı cihazın sistemi tarafından kullanılan yazı tipini otomatik olarak algılayacaktır. Sistem yazı tipi açıklamaları:-apple-system (San Francisco): iOS Safari, macOS Safari, macOS FirefoxBlinkMacSystemFont (San Francisco): macOS ChromeSegoe UI: WindowsRoboto: Android, Chrome OSUbuntu: UbuntuOxygen / Oxygen-Sans: KDEHelvetica Neue: macOS versions < 10.11Cantarell: GNOMEAşağıdaki ön izleme butonuna tıklayarak sistem yazı tipi ile oluşturulmuş sayfanın yazı tiplerini kontrol edebilirsiniz. Ön İzlemeBu yazımızda Sistem Yazı Tipi özelliğini blog sitelerine ekleme ve özellikleri hakkında bilgiler paylaştım. Yazımız içerisinde bulunan bilgiler hakkında sorularınız ve yardım için yorum formunu kullanarak bana ulaşabilirsiniz.