Yazı tipi sentezi - CSS Hileleri

Anonim

CSS'deki font-systhesisözellik, tarayıcıya font kalın ve italik karakterlerin, belirtilenler font-familyiçermediğinde nasıl işleneceğine dair talimatlar verir .

Google Fonts'tan Lato'yu örnek alalım. Yazı tipinin 10 farklı varyasyonu olduğunu söylüyor.

Bu yazı tipi çeşitlemelerinin her biri teknik olarak farklı bir yazı tipi dosyasıdır. Belirli ağırlıkları ve stilleri kullanmak istiyorsak, bu dosyaları birbirine bağlarız, böylece tarayıcının yükleyecek bir şeyi olur.

Bu cümle normalde dört farklı yazı tipi dosyası gerektirir.

Ancak, tüm yazı tiplerinde ağırlık ve stilin işlenmesine yönelik dosyalar bulunmaz. Bu gibi durumlarda, tarayıcı görünümü kendisini "sentezleyecektir". Tarayıcı elinden gelenin en iyisini yapar, ancak sahte kalınlaştırma ve stil bazen metni daha az okunaklı hale getirir; yani, gerçekten tasarlanmış bir versiyondan daha az okunaklı. En hafif durumlarda, karakterlerin çakıştığını görebiliriz. Daha ciddi durumlarda, metin tamamen okunamaz veya hatta anlamı değiştirebilir - Çince, Japonca, Korece ve diğer logografik komut dosyalarında olduğu gibi.

İşte burada font-synthesisdevreye girer. Tarayıcının sentezlemesine izin verilen yazı tiplerini kontrol eder.

Sözdizimi

.element ( font-synthesis: none | ( weight || style ); )

Düz İngilizce'de bu şu anlama gelir font-synthesis:

  • değeri none
  • ya ya weightdastyle
  • hem weightvestyle

Bunun font-synthesisbir steno özellik olarak kabul edildiğini belirtmek gerekir . Spec göre, bir arada bulunuyor font-synthesis-weightve font-synthesis-styleher ikisinin değerleri kabul nerede autoya none. Steno kullanarak aynı etkiyi elde etmek mümkün olduğundan, muhtemelen en iyi yol budur.

Değerler

  • none: Ne kalın ne de eğik sentezlenebilir
  • weight: Kalın, tarayıcı tarafından sentezlenebilir
  • style: Eğik tarayıcı tarafından sentezlenebilir
font-synthesis: none; /* browser will not synthesize any font faces */ font-synthesis: style; /* browser will not synthesize a bold font face */ font-synthesis: weight; /* browser will not synthesize an oblique font face */ font-synthesis: weight style; /* browser will synthesize bold and oblique faces if they are unavailable */

Kullanım

font-synthesis::first-letterve ::first-linesözde öğeler dahil tüm öğelerle birlikte kullanılabilir .

Tarayıcının tüm dil üzerinde kalın ve eğik sentezlemesine izin vermemenin anlamlı olduğu durumlar olabilir, çünkü her ikisi de karakterleri gizleyebilir. Arapça karakterler içeren sentezlenmiş kalın ve eğik font yüzlerini devre dışı bırakan spesifikasyondan alınan bir örneği burada bulabilirsiniz:

/* Disables synthetic bolded and obliqued characters in Arabic */ *:lang(ar) ( font-synthesis: none; )

Demo

Tarayıcı desteği

Yazma sırasında caniuse, font-synthesismülk için% 20,21 küresel kapsama bildiriyor .

Masaüstü Bilgisayar

IE Kenar Firefox Krom Safari Opera
Hayır Hayır 34+ Hayır 9+ Hayır

Cep Telefonu

iOS Safari Opera Mini Android Tarayıcı Android için Chrome Android için Firefox
9+ Herşey Hayır Hayır 68

font-synthesisE-postada kullanmak ister misiniz ? Kampanya Monitörü aşağıdaki istemciler tarafından desteklendiğini bildiriyor:

  • Apple Mail 10+
  • Mac için Outlook
  • AOL Alto iOS uygulaması
  • iOS Mail 10+
  • Serçe
  • G Suite
  • Gmail
  • Google Gelen Kutusu

Daha fazla bilgi

  • CSS Yazı Tipleri Modül Seviye 4 Özellikleri
  • "CSS3 testi: font-synthesis" Eric Meyer
  • "Metin Nasıl İtalik Yapılır", Chris Coyier