Yazı tipi ağırlığı - CSS Hileleri

Anonim

font-weightÖzelliği, bir yazı, ağırlık ya da kalınlığını belirleyen ve tarayıcı tarafından tanımlanan bir yazı aile veya ağırlıkları ile bağlıdır ya da mevcut yazı tipi yüzleri üzerindedir.

span ( font-weight: bold; )

font-weightÖzellik bir anahtar kelime değer veya önceden tanımlanmış sayısal değeri ya kabul eder. Mevcut anahtar kelimeler şunlardır:

  • normal
  • bold
  • bolder
  • lighter

Mevcut sayısal değerler şunlardır:

  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

Anahtar sözcük değeri normalsayısal değerle 400ve değer ile boldeşlenir 700.

400Veya dışındaki değerleri kullanarak herhangi bir efekti görmek 700için, kullanılan yazı tipinin belirtilen ağırlıklarla eşleşen yerleşik yüzlere sahip olması gerekir.

Font ailesinin bir parçası olarak bir fontun kalın ("700") veya normal ("400") bir sürümü varsa, tarayıcı bunu kullanacaktır. Bunlar mevcut değilse, tarayıcı yazı tipinin kendi kalın veya normal versiyonunu taklit edecektir. Kullanılamayan diğer ağırlıkları taklit etmeyecektir. Yazı tipleri, alternatif yazı tipi ağırlıklarını belirlemek için genellikle "Normal" ve "Hafif" gibi adlar kullanır.

Aşağıdaki demo, alternatif ağırlık değerlerinin kullanımını göstermektedir:

Bu Kaleme bakın!

Yukarıdaki demo, Google Web Yazı Tipleri API'sı kullanılarak gömülü ücretsiz Open Sans yazı tipini kullanıyor. Yazı tipi, mevcut tüm yazı tipi ağırlıklarıyla yüklenir ve bu nedenle, font-weightözelliği kullanarak, her paragrafın metninde açıklandığı gibi mevcut farklı ağırlıklar görüntülenir. Kullanılamayan ağırlıklar, mantıksal olarak en yakın ağırlığı gösterir.

Arial, Helvetica, Georgia, vb. Gibi yaygın yazı tiplerinin 400ve dışında ağırlıkları yoktur 700. Dolayısıyla, bu yazı tiplerinden biriyle görüntülenen aynı demo, dokuz paragrafta yalnızca iki ağırlık gösterecektir.

"Daha kalın" ve "daha hafif" anahtar kelimeler kullanma

Anahtar kelime değerleri bolderve lighterana öğenin hesaplanan yazı tipi ağırlığına bağlıdır. Tarayıcı, yazı tipi ailesinde neyin mevcut olduğuna bağlı olarak en yakın "daha kalın" veya "daha hafif" ağırlığı arayacaktır, aksi takdirde hangisinin en mantıklı olduğuna bağlı olarak sadece "400" veya "700" ü seçecektir.

Alt öğeler, "daha kalın" ve "daha hafif" anahtar kelime değerlerini miras almaz, bunun yerine hesaplanan ağırlığı devralır.

Tarayıcı Desteği

Krom Safari Firefox Opera IE Android iOS
İşler İşler İşler İşler İşler İşler İşler