bencede
New member
Değişken yazı tipleri ve bunların nasıl kullanılacağı (kullanılmayacağı)
Cuma günü yazılım çalıştırmak, ters gideceği efsanesine eşlik ediyor, aslında kritikse neredeyse ters gitmesi gerekiyor. Murphy’den selamlar. Bununla birlikte, deneyim, işlerin genellikle sorunsuz gittiğini ve istatistiklerin muhtemelen artık diğer iş günlerine merhamet göstermeyeceğini göstermiştir. Ancak hafta sonu hata düzeltmesi, bellekte normal bir iş gününe göre daha kalıcıdır. Son zamanlarda başımıza gelen bu.
açmak
6 Mayıs’ta Source Sans Pro yazı tipinin statik varyantından değişken yazı tipine geçiş yaptık. Şubeyi kapsamlı bir şekilde test ettik ve hatta evde çalışmayan cihazlarda eski ve yeni yazı tiplerini karşılaştırabileceğimiz genel bir test sayfası bile oluşturduk. Web’deki yazı tipleri ilk bakışta göründüğünden daha karmaşıktır. Bir yandan tarayıcı ve işletim sistemi arasındaki etkileşime, diğer yandan sürümlerine bağlıdır. Ek olarak, kullandığınız monitörün türüne ve DPI’sinin ne kadar yüksek olduğuna bağlı olarak yazı tipleri de farklı performans gösterebilir. Sonuç olarak, birçok faktör ve kombinasyon. Kullanıma sunma sorunsuz geçti, değişiklikten birkaç saat sonra bile her şey sessizdi. Vazgeçme zamanı. Hafta sonu. Yaşasın?
Hey! geri alma?
Ertesi Cumartesi, bu satırların yazarı foruma baktı ve yazı tipi hakkında iki tartışma fark etti. Windows 7’den 8.1’e kadar olan sürümlerde Firefox ile ilgili bir sorun belirginleşti ve bu da anlaşılabilir. Kalın yazı tipleri hakkında (font-weight) görünüşe göre değerlendirilmedi ve her zaman en ince yazı tipi çıktı alındı, bu da okunması çok zor bir yazı tipiyle sonuçlandı.
Aynı gün, soruna bir çözüm bulmak için girişimde bulunuldu, ancak hızlı bir şekilde uygulanabilir bir çözüm bulunamadı, bu nedenle geri alma tek seçenekti.
Değişken yazı tipleri nelerdir?
Web yazı tipleri, aslında her yazı tipi için ayrı bir dosyanız olacak şekilde yapılandırılmıştır. Örneğin, düz (normal) ve kalın (kalın) görünümde Source Sans Pro zaten iki dosyadır. Bu italik değişkenleri de kullanmak isterseniz, kombinasyonlar (normal-italik ve kalın-italik) iki satır daha anlamına gelir. Her ek varyant, birden çok yazı tipi dosyasının yüklenmesini içerir. Bu nedenle, birkaç karakter stiline indirgemeye çalışıyoruz. Tasarım açısından bu kesinlikle önerilir, ancak bazen farklı bir yazı tipi kullanmak düzen için iyi olabilir.
Değişken yazı tipleri ise farklı çalışır. Varyans eksenleri denen şeye sahip bir yazı tipi dosyası var. Bunlar, yazı tipini değiştirmek için kontrol edilebilir parametrelerdir. Bir yandan standart eksenler vardır, ancak yazı tiplerinin CSS aracılığıyla da kontrol edilebilen kendi eksenleri olabilir. Ancak bizim durumumuzda italik ve kalın için standart eksenlerdi.
Geri dönüş ile doğru entegrasyon
Değişken font özellikleriyle hâlâ ilgileniyorduk ve ilk aksilik bizi yıldırmadı. Daha fazla araştırma ve test sonunda bizi statik yazı tipi dosyalarına geri dönüş içeren çalışan bir çözüme götürdü. Uç cihazları değişken yazı tiplerini desteklemeyen Haberler online ziyaretçilerine statik yazı tipleri sağlanır ve statik yazı tipinin sunmadığı bir yazı tipi kullanıldığında, bunun yerine bir sonraki uygun yazı tipi kullanılır.
Değişken yazı tipi, tarayıcıya şu biçimde iletilir:
@font-face {
font-family: "Source Sans VF";
font-weight: 200 900;
src:
url("source-sans-vf.woff2") format("woff2 supports variations"),
url("source-sans-vf.woff2") format("woff2-variations");
}
burası çok önemli format-Özel. Şu anda değişken yazı tipleri için iki biçim ataması olduğu gerçeği, gökyüzüne bir gözle göz ardı edilebilir – ikisi de aynı dosyaya atıfta bulunur. Değişken Yazı Tipi tarafından yalnızca değişken yazı tipi biçimlerinin sunulması ve örneğin başka bir TTF varyantının sunulmaması önemlidir. the font-weight-Bu arada, buradaki belirtim, tarayıcıya bu yazı tipinin kapsadığı aralığı bildiren, değişken yazı tiplerinin bir özelliğidir.
Statik karakter, şimdiye kadar yapıldığı gibi, varyant başına bir tanımla hala normal şekilde tanımlanmaktadır:
@font-face {
font-family: "Source Sans Pro";
font-weight: 400;
src: url("source-sans-pro-400.woff2") format("woff2");
}
@font-face {
font-family: "Source Sans Pro";
font-weight: 600;
src: url("source-sans-pro-600.woff2") format("woff2");
}
Yazı tipi şimdi CSS’de aşağıdaki gibi kullanılmalıdır (örnek için diğer sistem geri dönüş yazı tipleri hariç tutulmuştur):
body {
font-family: "Source Sans Pro", sans-serif;
}
@supports (font-variation-settings: normal) {
body {
font-family: "Source Sans VF", sans-serif;
}
}
İle @supportssorgusunda, öncelikle değişken yazı tiplerini desteklemeyen tarayıcıların statik yazı tipinde kalmasını sağlıyoruz. Ancak, Windows 7 altındaki mevcut bir Firefox bunu desteklemektedir. font-variation-settings ve ardından önce değişken yazı tipini yüklemeyi deneyin. Ancak, belirtilen biçim (yukarıya bakın) desteklenmediğinden, sonuçta bunu Windows 7’de yapmaz. Normal CSS geri dönüş kuralları artık yürürlüğe giriyor ve statik yazı tipi kullanılıyor.
Modern tarayıcı ve işletim sistemi kombinasyonları, değişken yazı tipi formatını bilir ve destekler font-variation-settingsbu yüzden sadece değişken yazı tiplerini yüklerler.
Bu çözüme giden yolda çeşitli başka kombinasyonlar denedik. Örneğin, iki yazı tipi doğrudan bir yazı tipinde font-family– Diğerinin yedek yazı tipi olarak listelenmesi, bazı tarayıcılarda her iki yazı tipinin de yüklenmesine neden oldu. Veya bir belediyedeki değişken karakter @font-face– Statik karakterle tanımlamak, bizi değişken karakterlerin avantajlarından mahrum ederdi, çünkü bir varyasyon ekseninin yayılma tanımını belirleyemezdik.
Başlat – tekrar
Doğru yazı tipi tanımı ve uygulama kombinasyonunu bulduktan sonra, elbette özellikle kritik adaylarla ve ayrıca çeşitli tarayıcı ve işletim sistemi sürümlerinde tekrar test ettik.
Murphy’yi zorlamadan, bu sefer yeni lansman için bir Çarşamba seçtik. 18 Mayıs’ta, gözden geçirilmiş sürüm genel sunucunun eşiğini aştı ve herhangi bir geri bildirim için beraberinde bir forum gönderisi yazıldı. Ancak bu sefer değişim neredeyse fark edilmeden gitti. Vazgeçme zamanı.
(harita)
ana sayfaya