İçeriğe atla
Üyelik kaydınızı yaparak son yazılan içeriklerden haberdar olun! ×

CSS

  • makale
    57
  • yorum
    0
  • görüntüleme
    2.249

CSS'te font-weight özelliği ve TailwindCSS Sınıf Karşılığı


Doğuhan ELMA

80 görünüm

CSS'te font-weight özelliği, bir metnin kalınlığını veya ağırlığını belirlemek için kullanılır. Bu özellik, metnin daha ince veya daha kalın görünmesini sağlayarak tipografik vurgu ve hiyerarşi oluşturmada önemli bir rol oynar. font-weight özelliği çeşitli değerler alabilir, bunlar arasında sayısal değerler, anahtar kelimeler ve bazı durumlarda göreli değerler bulunur.

font-weight Değerleri

Sayısal Değerler

400: Normal veya kitap ağırlığı olarak da bilinir ve çoğu tarayıcının varsayılan metin ağırlığıdır.

700: Kalın ağırlık, çoğunlukla başlıklar için kullanılır.

100, 200, 300, 500, 600, 800, 900: Bu değerler, fontun desteklediği ölçüde, çok inceden çok kalına kadar farklı ağırlıkları temsil eder.

Anahtar Kelimeler

normal: Bu, 400 değerine eşdeğerdir ve standart metin ağırlığını belirtir.

bold: Bu, 700 değerine eşdeğerdir ve kalın metin ağırlığını belirtir.

lighter: Bu, mevcut elementin ebeveyninden bir ağırlık derecesi daha ince bir ağırlık belirtir.

bolder: Bu, mevcut elementin ebeveyninden bir ağırlık derecesi daha kalın bir ağırlık belirtir.

 

Tailwind:

Class
Properties
font-thin font-weight: 100;
font-extralight font-weight: 200;
font-light font-weight: 300;
font-normal font-weight: 400;
font-medium font-weight: 500;
font-semibold font-weight: 600;
font-bold font-weight: 700;
font-extrabold font-weight: 800;
font-black font-weight: 900;

 

font-weight özelliğinin etkili olması için kullanılan fontun, belirtilen ağırlıkları desteklemesi gerektiğini unutmamak önemlidir. Örneğin, bir web fontu yalnızca 400 ve 700 ağırlıklarını içeriyorsa, 300 veya 800 gibi değerler beklenen görsel etkiyi sağlamayabilir. Bu nedenle, tipografik tasarım yaparken kullanmayı düşündüğünüz fontların hangi ağırlıkları desteklediğini kontrol etmek önemlidir.

0 Yorum


Önerilen Yorumlar

Görüntülenecek yorum yok.

Misafir
Yorum ekle...

×   Zengin metin olarak yapıştırıldı.   Bunun yerine düz metin olarak yapıştır

  Yalnızca 75 emojiye izin verilir.

×   Bağlantınız otomatik olarak gömüldü.   Bunun yerine bağlantı olarak görüntüle

×   Önceki içeriğiniz geri yüklendi.   Düzenleyiciyi temizle

×   Görüntüleri doğrudan yapıştıramazsınız. URL'den resim yükleyin veya ekleyin.

×
×
  • Create New...