CSS baş harfiyle açılır büyük harflerinizi kontrol edin

Jhey Tompkins
Baş harfler için stil belirleme sanatı binlerce yıl olmasa da yüzlerce yıldır kullanılmaktadır. Yeni bir bölümün veya kitabın başlangıcını belirtmek için basılı stillerde kullanılması tarih boyunca görülmüştür. Ancak dijital çağda stil oluşturmak her zaman sorun olmuştur. Bunların stilini belirlemek için "temiz" bir çözüm bulunamadı.

CSS initial-letter özelliği, işleri çok daha kolaylaştırır.

Tarayıcı desteği

initial-letter'yi nerede deneyebilirsiniz? Bu özellik Safari ve Chrome 110'dan kullanılabilir. Safari'de mülkün -webkit- ön ekine ihtiyacı vardır. Firefox'ta uygulanmasıyla ilgili açık bir sorun var.

initial-letter desteğini şu cihazlarla test edin:

@supports (initial-letter: 1 1) { /* Your supported styles */ }

Mevcut çözümler

Günümüzde CSS'de büyük harflerle başlayan metinleri nasıl biçimlendirebilirsiniz?

::first-letter sözde öğesi, bu yolda bize yardımcı olur.

p::first-letter {
  color: hsl(220, 94%, 51%);
  font-weight: bold;
  font-size: 4rem;
}
.

Ancak bu durumda, ilk harfin boyutunu hesaplarken "float" gibi özelliklere ulaşmanız gerekir.

p::first-letter {
  color: hsl(220, 94%, 51%);
  font-weight: bold;
  font-size: 4rem;
  float: left;
  line-height: 1;
  margin-right: 0.25rem;
}
.

lh gibi yeni CSS birimlerinin kullanıma sunulması bu sorunların bir kısmını hafifletebilir. Ancak bu sürümler de sınırlı destek almaktadır (lh şu anda yalnızca Chrome'da desteklenmektedir).

p::first-letter {
  color: hsl(220, 94%, 51%);
  font-weight: bold;
  font-size: 3lh;
  float: left;
  line-height: 1;
  margin-right: 0.1lh;
}
bakın.

Baş harfi özelliğini kullanıma sunduk

initial-letter mülkü, bu büyük harf stili üzerinde daha ayrıntılı kontrol sağlar. Boşlukla ayrılmış iki değer alır:

p::first-letter {
  initial-letter: 3.5 3;
}
  • İlk bağımsız değişken, harfin boyutunu ve kaç satır kapladığını tanımlar. Harf, en boy oranını koruyarak büyütülür. Negatif değer kullanamazsınız ancak ondalık değerler kullanabilirsiniz.
  • İkinci bağımsız değişken, harf sızıntısını tanımlar. Bu, harfin oturacağı yer için ofset olarak düşünülebilir. İkinci değer isteğe bağlıdır ve negatif olamaz. Bu anahtar yoksa harf boyutu değeri, en yakın tam sayıya yuvarlanır. Bu, "düşüş" anahtar kelimesini kullanmaya eşdeğerdir. Yuva, 1'e eşit bir akışa eşdeğer olan "artış" adlı başka bir anahtar kelime değerini de kabul eder.

Baş harfi stilini nasıl etkilediğini görmek için değerleri değiştirebileceğiniz bu demoya göz atın.

göz atın.

Bunu ::first-line ile birleştirdiğinizde aşağıdaki gibi bir sonuç elde edebilirsiniz

p::first-line {
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1.25rem;
}
p::first-letter {
  font-family: "Merriweather", serif;
  initial-letter: 3.5 3;
  font-weight: bold;
  line-height: 1;
  margin-right: 1rem;
  color: #3b5bdb;
  text-shadow: 0.25rem 0.25rem #be4bdb;
}
kalemine bakın.

Dilerseniz border verebilirsiniz. Aşağıdaki örnekte, boş bırakılırsa varsayılan olarak kullanılacak ve 3'e eşit olacak "drop" anahtar kelimesinin nasıl kullanıldığına dikkat edin: css p::first-letter { font-family: "Merriweather", serif; initial-letter: 3.5 drop; font-weight: bold; line-height: 1; margin-right: 1rem; color: #3b5bdb; border: 0.25rem dashed #be4bdb; padding: 0.5rem; border-radius: 5px; }

göz atın.

background veya box-shadow ekleyebilirsiniz:

p::first-letter {
  font-family: "Merriweather", serif;
  initial-letter: 3.5 3;
  font-weight: bold;
  line-height: 1;
  margin-right: 1rem;
  color: var(--surface-1);
  background: #be4bdb;
  padding: 0.5rem;
  border-radius: 5px;
  box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}

Alternatif olarak arka planı metne kırpabilirsiniz:

p::first-letter {
  background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
  font-family: "Merriweather", serif;
  initial-letter: 3.5 3;
  font-weight: bold;
  line-height: 1;
  margin-right: 1rem;
  color: transparent;
  -webkit-background-clip: text;
  padding: 0.5rem;
}
kalemine bakın.

Çok sayıda seçeneğiniz var.

initial-letter ile ilk harfler için daha ayrıntılı bir stil kontrolü elde edebilirsiniz. Yazı tipinize büyük harf eklemek ister misiniz? Bu öğelere nasıl stil verebilirsiniz? Bunu bize bildirin!