WordPress sitesinde değişken bir yazı tipi nasıl kullanılır

Dürüst olalım. Web sitenizde ağır, yükseklik veya mesafe varyasyonları olmadan bir yazı tipi kullanırsanız, insanlar sıkılır. Eşyalarınızı okumayacaklar. Bu yüzden sitenizde değişken bir yazı tipi kullanmanız gerekir. Yalnızca bir yazı tipi kullanmayı seçseniz bile, işlevsel olarak çok sayıda yazı tipi seçeneği olacak şekilde CSS üzerinden yeterince değiştirebilirsiniz. Değişken yazı tipi nedir? Değişken yazı tipi, 5 farklı kritere veya eksene göre CSS tarafından değiştirilebilen tek bir yazı tipidir. Her eksen yazı tipi ekranının belirli bir yönünü kontrol eder ve uygun bir CSS etiketine sahiptir.
Ağır (CSS’de WGHT)
SheRed (CSS’de SLNT)
Tilted (CSS’de ital)
Optik Boyut (CSS’de OPSZ)
Genişlik (CSS’de ağırlık)
Ve sonra CSS’de Grad tarafından temsil edilen sahte bir su-su-su-su-su-su-su-su-su-su-su-su-su-su-su-su-su-su-su-su-su-su-su-su-su-su-su-su-su-su-su-su-su-su-su-isim vardır. Umarım size stil sayfanızda kullanıldığında neden sınıfla yazıldığını söyleyebilirim … ama yapamam. Durum bu. Buna ek olarak, yeni eksen, teknolojik gelişmeler olarak farklı şirketler tarafından (ve orta derecede) tanıtılabilir. Yani gelecekte bununla yapabileceğimiz birçok şey var. Tüm farklı eksenleri birleştirirken, bir tür harfin kabaca yapmak istediğiniz her şeyi yapmasını sağlayabilirsiniz-onu SVG gibi ayarlayın. (Dikkat edin, buna bizimki gibi simge yazı tipleri de dahildir.)
Neden değişken yazı tipleri kullanıyor? Kısa cevap, sitenizde birçok yazı tipini sabitlemek ve oluşturmaktan çok daha verimli olmalarıdır. Google Geliştirici Belgeleri bunu iyi özetler: OpenType değişken yazı tipleri, tür ailelerin çeşitli varyasyonlarını bir yazı tipi dosyasında depolamamıza izin verir. Monotip, hem italik hem de romantizm stillerinde üç genişlikte sekiz ağırlık üretmek için 12 yazı tipi girişini birleştirerek deneyler çalıştırır. Bir değişken yazı tipi dosyasında 48 ayrı yazı tipini depolamak, dosya boyutunda%88 azalma anlamına gelir. WordPress’te değişken bir yazı tipi kullanarak (kendilerine vurgu yapar) şimdi değişken yazı tiplerinin oldukça harika olduğunu biliyoruz, bir sonraki adım onu ​​iş akışımıza ve WordPress sitesine koymaktır. Adım 1 Yapmanız gereken ilk şey, web sitenize yazı tipleri yüklemektir. ET üyesiyseniz, doğrudan Divi arabiriminden yükleyebilir, @font-face kullanarak veya eklentileri ve temaları tamamen görmezden gelip eski şekillerde yaparak doğrudan Divi arabiriminden yükleyebilirsiniz.
Nasıl yaptığınız dışında, sitenizde bulunduktan sonra, yazı tipini kullanmak aslında oldukça kolaydır. Bunun için, Divi aracılığıyla ücretsiz bir gingham yazı tipi yükledim çünkü kullanıyorum. Sonuç aynıdır.

Adım 2 CSS tabanlı değişken yazı tipi, özel CSS’nizi eklediğiniz yere gitmek isteyeceksiniz. Custom.css dosyası, stylesheet.css, WordPress’in ek CSS ayarında veya hatta genel divi tema seçeneği sekmesinin alt kısmında olabilir (çoğu tema benzer bir kutuya da sahiptir). Bu kodu gireceksiniz (kullandığınız değişken yazı tipinin adıyla). @font-face {font-family: ‘gingham’;
Src: url (‘gingham.woff2’) biçimi (‘woff2’),,
} Bu, CSS pencerenizde böyle görünecektir.
Tüm bunlar web sitenizde yazı tiplerini kullanmanıza izin verir.
Adım 3 Şimdi bir şekilde düzenleme zamanı. Onunla ne istersen yapabilirsiniz ve stil herhangi bir sınıfa veya kimliğe uygulanabilir. Gördüğünüz gibi, bu herhangi bir div’e uygulanır. Vücutta veya H1, H2, H3 veya hatta P’ye uygulayabilirsiniz. Senin seçimin. Ancak, değişken yazı tipleridir. Buna yaklaşmanın iki yolu vardır. Birincisi, yazı tipi varyasyon-ayarları kullanan etkili bir CSS hattıdır. H3 {

Yazı tipi ailesi: ‘gingham’, helvetica, sans-serif;

yazı tipi boyutu: 35px;
yazı tipi değişkenlik ayarları: ‘wght’ 700, wdth ’75;
} Bunu şamandıra veya z ekseni veya herhangi bir şey gibi diğer CSS ile de ekleyebilirsiniz.
Veya ekseni tek tek satıra yerleştirebilirsiniz. H3 {
Yazı tipi ailesi: ‘gingham’, helvetica, sans-serif;
yazı tipi boyutu: 35px;
Wdth: 900;
Wght: 100;
}
Sonunda ikisi de aynı şeyi yaptı.
Kredi resmi: Google Geliştirici Kılavuzu
Değişken bir yazı tipi nerede buldum? Değişken yazı tipleri bulmak, yalnızca Google yazı tipine gitmekten biraz daha zordur (esas olarak değişkenli Google yazı tipi olmadığı için). Teknoloji yeni olduğundan, değişken yazı tipleri yaygın değildir. Eksen arasındaki tüm etkileşimler nedeniyle ayrı ayrı yapılmalıdır, bu nedenle onu sağlayan yerde, genellikle satın almak için premium bir yazı tipidir. Adobe TypeKit, seçmeniz için bir dizi değişken yazı tipi sunar. Creative Cloud üyeliğine sahip birkaç Türbeye erişebilirsiniz.

V-fonts.com, değişken yazı tipleri almanız için birçok farklı yerin dizinidir. Çektiklerinin çeşitli kaynaklarına bağlanırlar.
Monotip değişken yazı tipleri satıyor ve Meta FF yazı tiplerinin ücretsiz bir gösterisi bile var.
Ücretsiz bireysel yazı tipleri alabileceğinizi söyleyen ücretsiz değişken yazı tipleri. Kenny Sing’in yüksek tadı ile önerildiği ve her zaman yetenekli.
Gingham yukarıda kullandığımız şeydir. Kenny beni koydu ve bu iyi.
League Mono, basit ama çok yönlü değişken yazı tipleri için iyi bir seçimdir.
Renner Page bunun modern bir şaheser olduğunu söylüyor. Ben kimim tartışacağım?
Şimdilik yapmalısın. Düzinelerce yazı tipi gibi değişken yazı tipleri bir kutuya paketlendiğinden, yukarıdakileri indirdiğinden ve sayabileceğimden daha fazla seçeneğe erişiminiz var.
WordPress sitenizde değişken bir yazı tipi kullanırken hatırlamanız gereken tek şeyin göz önüne alındığında şudur: Tüm tarayıcılar bunu desteklemez, ancak Firefox’un bununla ilgili birkaç sorunu vardır. Dolayısıyla, değişken yazı tipinin değişken bir parçasını web sitenizin paha biçilmez kısmı olarak yapmayı planlıyorsanız, Firefox’taki insanlar veya Microsoft Edge için acil durum planı isteyebilirsiniz. Ama yine de, insanlar hala çalıştırdığı için bunlardan birine sahip olabilirsiniz. Kalın veya eğik harfler ekleyebileceğiniz gibi CSS özniteliklerini ayarlayabilme olağanüstü. Ve giderek daha fazla tarayıcı onlar için geliştirilen çeşitli eksenleri tanımaya başladığından, değişken yazı tipleri en azından denemek istediğiniz bir şey olacaktır – eğer iki eliyle kucaklamazsanız. Değişken yazı tipleri hakkında ne düşünüyorsunuz? Tyler Finck / Tylerfinck.com’un kredi resimleri

admin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir