Bir WordPress Web Sitesinde Değişken Yazı Tipleri Nasıl Kullanılır
Yayınlanan: 2018-07-30Dürüst olalım. Web sitenizde ağırlık, boy veya boşlukta değişiklik olmayan tek bir yazı tipi kullanırsanız, insanlar sıkılacaktır. Yazdıklarını okumazlar. Bu yüzden sitenizde değişken fontlar kullanmanız gerekiyor. Yalnızca tek bir yazı tipi kullanmayı seçseniz bile, CSS aracılığıyla işlevsel olarak çok sayıda yazı tipi seçeneğine dönüşecek kadar ince ayar yapabilirsiniz.
Değişken Yazı Tipi nedir?
Değişken fontlar, CSS tarafından 5 farklı kritere veya eksene göre değiştirilebilen tekli fontlardır. Her eksen, yazı tipinin görünümünün belirli bir yönünü kontrol eder ve karşılık gelen bir CSS etiketine sahiptir.
- Ağırlık ( CSS'de ağırlık)
- Eğimli ( CSS'de slnt )
- İtalik (CSS'de ital )
- Optik Boyut ( CSS'de opsz )
- Genişlik ( CSS'de ağırlık )
Ve sonra, CSS'de GRAD tarafından temsil edilen sözde eksen Derecesi vardır. Stil sayfalarınızda kullanıldığında Grade'in neden tamamı büyük harflerle yazıldığını size söyleyebilmeyi isterdim… ama yapamam. Neyse ne. Ek olarak, teknoloji geliştikçe farklı şirketler tarafından yeni eksenler tanıtılabilir (ve tanıtılır). Yani gelecekte bunlarla yapabileceğimiz çok şey var.
Tüm bu farklı eksenleri birleştirirken, herhangi bir tek yazı tipinin kabaca yapmak istediğiniz her şeyi yapmasını, hatta onları SVG'ler gibi canlandırmasını sağlayabilirsiniz. (Bunun bizimki gibi simge yazı tiplerini de içerdiğini unutmayın.)
Neden Değişken Yazı Tiplerini Kullanmalısınız?
Kısa cevap onlar çok daha verimli gömme ve sitenizde birden fazla fontları render daha olmamız. Google'ın geliştirici belgeleri bunu güzel bir şekilde özetliyor:
OpenType değişken yazı tipleri, bir tür ailesinin birden çok varyasyonunu tek bir yazı tipi dosyasında saklamamıza izin verir. Monotype, hem İtalik hem de Roma stilinde üç genişlikte sekiz ağırlık oluşturmak için 12 giriş yazı tipini birleştirerek bir deney yaptı. 48 ayrı yazı tipini tek bir değişken yazı tipi dosyasında saklamak , dosya boyutunda %88'lik bir azalma anlamına geliyordu. (kendilerini vurgulayın)
WordPress'te Değişken Yazı Tiplerini Kullanma
Artık değişken yazı tiplerinin oldukça harika olduğunu bildiğimize göre, bir sonraki adım bunları iş akışımıza ve WordPress sitelerimize dahil etmektir.
Aşama 1
Yapmanız gereken ilk şey, yazı tipini web sitenize yüklemek. Herhangi Bir Yazı Tipi Kullan gibi bir eklenti kullanabilir, ET üyesiyseniz doğrudan Divi arayüzü üzerinden yükleyebilir, @font-face kullanarak bağlantı kurabilir veya eklentileri ve temaları tamamen terk edip eski moda şekilde yapabilirsiniz.
Nasıl yaptığınıza bakılmaksızın, sitenize bir kez sahip olduktan sonra, yazı tipini kullanmak aslında oldukça kolaydır. Bunun için Divi üzerinden ücretsiz Gingham yazı tipini yükledim çünkü kullandığım şey bu. Sonuç aynı.
Adım 2
Değişken yazı tipleri CSS tabanlı olduğundan, özel CSS'nizi eklediğiniz her yere gitmek isteyeceksiniz. Bu, bir custom.css dosyasında, bir stylesheet.css dosyasında, WordPress özelleştiricinizin Ek CSS'sinde veya hatta Divi Tema Seçenekleri'nin Genel sekmesinin altında olabilir (çoğu temanın da benzer bir kutusu vardır). Bu kodu gireceksiniz (hangi değişken yazı tipini kullanıyorsanız kullanın).
@font-face {
font-family: 'Gingham';
src: url('Gingham.woff2') format('woff2'),
}CSS pencerenizde böyle bir şey görünecektir.
Tüm bunlar, web sitenizdeki yazı tipini kullanmanıza izin vermektir.
Aşama 3
Şimdi bir şekilde stil vermenin zamanı geldi. Bununla ne istersen yapabilirsin ve stil herhangi bir sınıfa veya kimliğe uygulanabilir. Gördüğünüz gibi, bu herhangi bir .et_pb_text div'ine uygulanıyor. Tüm vücuda veya h1, h2, h3 ve hatta p'ye uygulanmasını sağlayabilirsiniz . Senin seçimin. Sonuçta bunlar değişken yazı tipleridir.
Buna yaklaşmanın iki yolu var. Birincisi, font-varyasyon-ayarlarını kullanan tek, verimli bir CSS satırıdır .
h3 {
font-family: 'Gingham',Helvetica,sans-serif;
font-size: 35px;
font-variation-settings: 'wght' 700, 'wdth' 75;
}Bunları diğer CSS'lere de ekleyebilirsiniz, tıpkı kayan nokta veya z ekseni veya başka herhangi bir şey gibi.
Alternatif olarak, eksenleri tek tek satırlara girebilirsiniz.
h3 {
font-family: 'Gingham',Helvetica,sans-serif;
font-size: 35px;
wdth: 900;
wght: 100;
}
İkisi de sonunda aynı şeyi yapıyor.
Resim kredisi: Google Geliştirici Kılavuzu
Değişken Yazı Tiplerini Nerede Bulabilirim?
Değişken yazı tiplerini bulmak, Google Yazı Tiplerine gitmekten biraz daha zordur (özellikle Google Yazı Tiplerinin hiçbiri değişken olmadığı için). Teknoloji yeni olduğu için değişken yazı tipleri o kadar yaygın değildir. Eksenler arasındaki tüm etkileşimler nedeniyle ayrı ayrı yapılmaları gerekir, bu nedenle bunları sağlayan yerlerde genellikle satın almak için birinci sınıf yazı tipleridir.
- Adobe Typekit, aralarından seçim yapabileceğiniz bir dizi değişken yazı tipi sunar. Creative Cloud üyeliğiyle TypeKit'in bazılarına erişebilirsiniz.
- V-Fonts.com, değişken yazı tiplerini almanız için birçok farklı yerin bulunduğu bir dizindir. Çektikleri şeylerin farklı kaynaklarına bağlanırlar.
- Monotype değişken yazı tipleri satıyor ve hatta FF Meta yazı tipinin ücretsiz bir demosu bile var.
Serbest Değişken Yazı Tipleri
Bununla birlikte, bazı ücretsiz bireysel yazı tiplerini alabilirsiniz. Bunlar nefis zevkli ve her zaman yetenekli Kenny Sing tarafından önerilenler.
- Şemsiye yukarıda kullandığımız şeydir. Kenny beni işe aldı ve bu iyi bir şey.
- League Mono, basit ama çok yönlü değişken bir yazı tipi için de iyi bir seçimdir.
- Renner'ın sayfasında bunun modern bir başyapıt olduğu yazıyor. Ben kimim ki tartışayım?
Şimdilik bu seni yapmalı. Değişken yazı tipleri, tek bir kutuda paketlenmiş düzinelerce yazı tipi gibi olduğundan, yukarıdakileri indirin ve sayabileceğimden daha fazla seçeneğe erişebilirsiniz.
Aklında tut
WordPress sitenizde değişken yazı tiplerini kullanırken aklınızda bulundurmanız gereken tek şey şudur: Henüz tüm tarayıcılar bu yazı tiplerini desteklememektedir , örneğin Firefox'un bunlarla ilgili bazı sorunları vardır. Bu nedenle, değişken bir yazı tipinin değişken kısmını web sitenizin paha biçilmez bir parçası yapmayı planlıyorsanız, muhtemelen Firefox… veya Microsoft Edge'deki insanlar için bir acil durum planı isteyeceksiniz. Ama sonra tekrar, muhtemelen hala IE 6 çalıştıran insanlar yüzünden bunlardan birine sahipsiniz.
Toplama
Değişken yazı tipleri, kullanıcının çok az çalışmasıyla tabloya bir ton değer katar. Kalın veya italik ekleyebildiğiniz gibi, bunları CSS nitelikleriyle biçimlendirebilmek harika. Ve daha fazla tarayıcı, kendileri için geliştirilen çeşitli eksenleri tanımaya başladıkça, değişken yazı tipleri en azından denemek isteyeceğiniz bir şey olacaktır - iki kolla kucaklamak değilse bile.
Değişken yazı tipleri hakkındaki düşünceleriniz nelerdir?
Makale özellikli resim kredisi Tyler Finck / tylerfinck.com