Temel metin ve yazı tipi biçimi

Bu derste, CSS ile metin stilinde ustalaşma yolculuğuna başlayacağız. Burada, yazı tipi genişliğini, ailesini, yazı tipi kısa tanımını, hizlamasını, satır/harf aralığını ve diğer efektleri de dahil omak üzere metin/yazı tipi stilinin tüm temellerini ayrıntılı olarak inceleyeceğiz.

Ön koşullar: Giriş seviyesi bilgisayar kullanımı, gerekli yazılımların yüklenmesidosyalarla çalışma konusunda yeterli seviyede bilgiler ve  HTML temelleri (IHTML'ye Giriş bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(CSS ilk adım)
Amaç: Web sayfalarında metin biçimlendirmek için gereken temel özellikleri ve teknikleri öğrenmek.

CSS'de metnin stilini belirlemeye neler dahildir?

HTML ve CSS ile yaptığın çalışmalarda zaten deneyimlemiş olacağın gibi, bir öğenin içindeki metin, öğenin içerik kutusunun içine yerleştirilir. İçerik alanının sol üstünde (veya RTL metin yönünde sağ üstte) başlar ve satırın sonuna doğru akar. Kutunun sınırına ulaştığında, bir sonraki satıra iner ve tüm içerik kutuya yerleştirilinceye kadar sonraki satıra devam eder. Metin içeriği etkili bir şekilde bir dizi satır içi öğe gibi davranır. Satırlar birbirlerine bitişik olarak yerleştirilir ve satır sonuna ulaşılmadıkça  veya <br>  etikeytiyle karşılaşmadıkça satır kesmeleri(satır başı) oluşturulmaz.

Not: Yukarıdaki paragraf kafanızın karışmasına neden oluyorsa, devam etmeden önce Kutu Modeli dersimizi bir daha inceleyin.

Metni bimlendirmek için kullanılan CSS özellikleri genellikle iki kategoriye ayrılır ve bunları bu derste ayrı ayrı inceleyeceğiz:

  • Font stilleri: Metne uygulanan fontu etkileyen, hangi fontun uygulanacağını, ne kadar büyük olduğunu, kalınlığını, italik olup olmadığını gibi özellikler.
  • Metnin mizanpaj stilleri: Metinin aralığını, satır/harf arasındaki boşluğunu ve metinin kutu içerisinde hizalanmasının ddeğiştirilmesi gibi özellikler.

Not: Bir öğenin içindeki metnin tek bir varlık olarak etkilendiğini unutmayın. Metni <span> veya <strong> gibi öğelerin içine almadıkça veya ::first-letter(bir öğenin içindeki metnin ilk harfi), ::first-line(bir öğenin içindeki metnin ilk satırı) veya ::selection(imleç tarafından o anda seçilen kısmı) gibi sözde öğeleri kullanmadıkça, alt bölümleri seçemez ve bunlara stil uygulayamaz.

Fontlar(Yazı Tipleri)

Fontları şekillendirme özelliklerine bakalım. Bu örnekte, aşağıdaki gibi görünen HTML öreneğine bazı farklı CSS özellikleri uygulayacağız:

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat 
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban 
predator — Tommy the cat had many a story to tell. But it was a rare 
occasion such as this that he did.</p>

Bitmiş örneği GitHub'da bulabilirsiniz (ayrıca kaynak kodunu da görebilirsiniz).

Renk

color niteliği hedeflenen öğedeki görünen içeriğin rengini belirler(bunlar, genellikle metindir fakat metne text-decoration niteliğiyle uygulanan alt ve üst çizgidir).

color niteliği herhangi bir CSS renk birimini kabul edebilir. Örneğin:

p {
  color: red;
}

Bu kural paragraf renginin, taryıcının varsayılan rengi olan siyah yerine kırmızı olmasına neden olur:

Font ailesi

Metninizde farklı bir yazı tipi ayarlamak için font-family  niteliği kullanılır — bu, tarayıcının hedeflenen öğelere uygulaması için bir font (veya font listesi) belirlememize olanak tanır. Tarayıcı, yalnızca web sitesine erişilen makinede mevcutsa bir yazı tipi uygular; mevcut değilse tarayıcı varsayılan fontu kullanır. Basit bir örnek şöyle görünür:

p {
  font-family: arial;
}

Bu, bir sayfadaki tüm paragrafların herhangi bir bilgisayarda bulunan arial fontunu kullanmasını sağlar.

Web uyumlu fontlar

Font kullanılabilirliliğinden bahsetmişken, genellikle tüm işletim sistemlerinde mevcut olan ve bu sayede endişe duyulmadan kullanılabilen bir kaç font vardır. Bunlara web uyumlu font(yazı tipleri) denir.

Çoğu zaman, web geliştiricileri olarak, metin içeriğimizi görüntülemek için kullanacağımız font üzerinde daha fazla kontrole sahip olmak isteriz. Bu aşamada karşımıza çıkacak sorun, web sayfasını görüntülemek için kullanılan cihazda(Bilgisayar, tablet, akıllı telefon vb) hangi fontların yüklü olduğunu bilememizdir. Bunu bilmenin bir yolu da yoktur, ancak web uyumlu fontların en çok kullanılan işletim sistemlerinde(macOS, Windows, en yaygın Linux dağıtımları, iOS ve Android) bir örneğinin mevcut olduğunu bilmeniz ilk aşamada yeterlidir.

Gerçek web uyumlu fontların listesi, işletim sistemleri geliştikçe değişecektir, ancak aşağıdaki fontları şimdilik web için kullanılabilir olduklarını kabul etmek faydalıdır(bunların çoğu, 90'ların sonları ve 2000'lerin başında Microsoft Çekirde Web Fontları sayesinde popüler hale gelmiştir):

Adı Genel Tipi Notlar
Arial sans-serif

Arial'in daha fazla desteğe sahip olmasına rağmen Helvetica'yı tercih edebilirsiniz, çünkü yazı tipinin görünümü neredeyse aynı olsa da, Helvetica'nın daha güzel bir şekle sahip olduğu düşünülür. En bariz farkı iki yazı tipi arasındaki satır aralığı farkıdır. Helvetica biraz daha geniş bir satıra aralığına sahiptir.

Courier New monospace

Bazı işletim sistemlerinde Courier New yazı tipinin muhtemelen daha eski bir sürümü olan Courier yazı tipine de sahip olabilir. Her iki yazı tipide bir birlerinin yerine kullanılabilecek alternatif olarak gözüksede, daha yeni bir sürüm olan Courier New'in kullanılması tavsiye edilir.

Georgia serif
Times New Roman serif

Bazı işletim sistemlerinde Times New Roman'ın muhtemelen daha eski bir sürümü olan Times yazı tipine de sahip olabilir. Her iki yazı tipide bir birlerinin yerine kullanılabilecek alternatif olarak gözüksede, daha yeni bir sürüm olan Times New Roman'in kullanılması tavsiye edilir.

Trebuchet MS sans-serif

Bu yazı tipini kullanırken dikkatli olmalısınız — mobil işletim sistemlerinde yaygın olarak bulunmaz.

Verdana sans-serif

Not: Güvenle kullanabileceğiniz yazı tipleri listesini bulabileceğiniz kaynaklar arasında,  cssfontstack.com sitesi Windows ve macOS işletim sistemlerinde bulunan yazı tiplerinin ne kadar güvenli oldukları ve sistem üzerinde bulunabilirliği hakkında size yardımcı olabilir.

Not: Web sayfalarında kullanmak istediğimiz yazı tipinin kurulu olup olmadığına bakmaksızın, her hangi bir yazı tipini kullanmamıza olanak sağlayan bir seçeneğimiz de vardır:  Web yazı tipleri. Bu konu biraz daha karmaşıktır ve bu ünitenin ilerleyen bölümlerinde ayrı bir derste inceleyeceğiz.

Varsayılan yazı tipleri

CSS genel kullanım için yazı tiplerini beş farklı ad altında gruplar: serifsans-serif, monospace, cursive ve fantasy. Bu isimler bir genellemedir ve bu adları kullanırken hangi yazı tipinin kullanılacağı tarayıcı ve tarayıcının kurulu olduğu işletim sistemine bağlıdır. Bu adları, tarayıcının belirlemiş olduğumuz yazı tipine/tiplerine uygun herhangi bir yazı tipiyle eşleştirme yapamadığı durumlarda, bu adlara tanımlanmış herhangi bir yazı tipini belirlemesi için kullanırız.

Bu beş adlandırma şu şekilde guruplandırılmıştır:

Ad Tanım Örnek
serif

Serifli yazı tipleri olarak bilinirler. Harflerde okumayı kolaylaştırdığı düşünülen harflerin köşelerinde hafif çıkıntı ve süslemelerin olduğu yazı tipleridir.

Ben büyük kırmızı bir filim
sans-serif Serif içermeyen yazı tipleridir. Yazı tipi düzdür ve daha modern göründüğü düşünülür. Ben büyük kırmızı bir filim
monospace Yazı tipinin her karakterinin genişliği aynı olduğu ve genellikle kodun okunurluluğunu kolaylaştırdığı için kodlamalarda kullanılır. Ben büyük kırmızı bir filim
cursive Akıcı bir el yazısını taklit etmesi amaçlanmış yazı tipleridir. Ben büyük kırmızı bir filim
fantasy Daha çok dekoratif amaçla kullanılan süslemeli yazı tipleridir. Ben büyük kırmızı bir filim

Yazı tipi listesi

Web sayfalarınızda kullanmak istediğiniz yazı tiplerinin kullanılabilirliğini garanti edemeyeceğiniz için (bir web yazı tipi bile herhangi bir nedenle başarısız olabilir), tarayıcının seçim yapabileceği birden çok yazı tipini tanımlayabiliriz. Bunun için, font-family niteliğine bir birinden virgül ile ayrılmış birden çok yazı tipi adından oluşan bir yazı tipi listesi tanımlarız. örn.

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

Böyle bir durumda, tarayıcı listenin başından başlar ve yazı tipinin işletim sisteminde bulunup bulunmadığına bakar. Yazı tipi varsa, var olan yazı tipini öğelere uygular. Değilse, sonraki yazı tipine geçer ve bu şekilde devam eder.

Listenin sonunda uygun bir genel yazı tipi grubu adı sağlamak iyi bir yaklaşım olur. Böylece listeelenen yazı tiplerinden hiçbiri mevcut değilse, tarayıcı en azından istediğimiz yazı tipine uygun bir seçim yapmasını sağlayabiliriz. Bu noktayı vurgulamak için, eğer genel adlandırma kullanmaz isek tarayıcı paragraflara varsayılan serifli bir yazı tipi uygulayabilir — bu genellikle Times New Roman olur — sans-serif yazı tipi olmasını istediğimiz durumlar için istediğimiz bir sonuç değil.

Not: Trebuchet MS gibi birden fazla kelimeden oluşan font isimlerini tırnak içine almak gerekir, örneğin "Trebuchet MS".

Bir font-family örneği

Paragraflara bir sans-serif yazı tipi vererek önceki örneğimize ekleyelim:

p {
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

Sayfamız artık böyle görünür:

Yazı Tipi Boyutu

Önceki ünitede CSS değerleri ve birimleri dersimizde, uzunluk ve boyut birimlerini inceledik. Yaz tipi boyutu (font-size niteliği ile ayarlanır), bu nitelik birçok ölçü birimi değerini kabul eder(yüzdelikler ve diğerleri), ancak metni boyutlandırmak için kullanacağınız en yaygın birimlerse şunlardır:

  • px (piksel): Metnin yüksekliğini piksel adedi olarak belirler. Bu mutlak bir birimdir — Her tarayıcı ve işletim sisteminde aynı yüksekliğe sahip olur.
  • ems: 1 em, stilini belirlediğiniz mevcut öğenin üst öğesinde ayarlanan yazı tipi boyutuna eşittir(daha karakteristik olarak, ana öğenin içinde bulunan M hafinin genişliği). Farklı yazı tipi boyutlarına sahip iç içe yerleştirilmiş birçok öğenin olduğu aşağıdaki gibi bir örnekte ki tanımlamaları nasıl yapabiliriz. İşi neden zorlaştırıyoruz? Bir kez alıştığımızda em kullanımı oldukça doğal gelmeye başlayacaktır ve sadece metni değil, her şeyi boyutlandırmada kullanabiliriz. Bakımı kolay olan bir web sitesi sahibi olmak için em çok yardımcı olacaktır.
  • rems: rem hedeflediği öğenin bir üst öğesindeki değeri değilde belgenin kök öğesindeki — <html> — değeri baz almanın dışında aynı em gibi davranır. Bu, yazı tipi boyutlarınızı hesaplamak için matematik işlemlerini çok daha kolaylaştırır, eğer eski tarayıcıları destekelemek istiyorsanız, ek bildirimlerde bulunmanız gerecektir — rem Internet Explorer 8 ve alt sürümlerinde desteklenmez.

font-size nitelik değeri, ilgili öğenin ebeveyninden miras olarak alınır ve tarayıcılar arasında varsayılan <html>  kök öğesinin font-size nitelik değeri 16px olarak tanımlanmasıyla, kök öğenin çocukları ve torunları için bir kural oluşturmadığınız sürece sayfanızdaki tüm öğelerinfont-size değeri aynı olur. Diğer bazı öğelerin tarayıcı tarafından tanımlanmış varsayılan değerleri de olabilir, meselâ <h1>  öğesinin varsayılan font-size nitelik değeri 2em boyutundadır, bu nedenle piksel boyutu 32px olacaktır.

İç içe geçmiş öğelerin yazı tipi boyutunu ayarlamaya başladığınızda işler biraz karmaşaya neden olabilir. Örn., sayfanızdaki <article>  öğesinin yazı tipi boyutunu 1.5em olarak ayarladınız buda normal şartlarda 24px olarak hesaplanacaktır ve <article> öğesinin içerisindeki paragrafların yazı tipi boyutunuda 20px olmasını istiyorsunuz. Bu durumda hangi em değerini kullanırdınız?

<!-- belgenin kök font-size değeri 16px -->
<article> <!-- Buradaki font-size 1.5em olmasını istiyoruz -->
  <p>My paragraph</p> <!-- tüm paragraflarımızın font-size değerininde 20px olmasını planladık? -->
</article>

Yukarıdaki hesaplama adımlarının ilkinde 16*1,5 işlemiyle <article> öğemizin yazı tipi boyutu 24px olarak hesaplanır, paragraflarımızda font-size nitelik değerini hesaplamak için baz alacağı değeri, ebeveyni olan <article> yazı tipi boyutundan alacağı için; em * 24=20, em=20/24, em=0,83333333 olarak yazmamız gerekir. Bu biraz tuhaf gelebilir, bu yüzden bir şeyleri nasıl şekillendirdiğiniz konusunda dikkatli olmalısınız. rem işleri bira daha basit tutmak  için kullanışlı olabilir.

Basit bir boyutlandırma örneği

Metinlerimizi boyutlandırıken, sayfamızdaki her öğenin atası olan <html> kök öğemizin font-size nitelik değerini 10px olarak ayarlamak daha sonraki boyutlandırma hesaplamalarımız için iyi bir yaklaşım olacaktır — bu şekilde rem niteliklerimiz varsayılan 16px değeri yerine 10px değerini baz alacaklardır. Sayfamızdaki öğeler için font-size nitelik tanımlamalarımızı belli bir alanda listelemek de iyi bir fikirdir, böylece bulunmaları kolay olacaktır.

Yeni yakşımımızla sayfamızın sonucu şu şekilde olacaktır:

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

Yazı tipi stili, yazı tipi kalınlığı, metnin BÜYÜK/küçük dönüşümü ve metnin dekorasyonu/süslemesi

CSS, metnin görsel kalınlığı/vurgusunu değiştirmek için dört ortak özellik sağlar:

  • font-style: Metnin italik görünümünü açıp/kapatmak için kullanılır. Olası değerler aşağıdaki gibidir(Herhangi bir nedenle italik görünmesini istediğimizde bunu nadiren kullacaksınız — belkide web yazı tipinizin sadece italik sürümü vardır):
    • normal: Metni normal yazı tipine ayarlar (mevcut italikleri kapatır.)
    • italic: Metni, varsa yazı tipinin italik sürümünü kullanacak şekilde ayarlar; yoksa, bunun yerine italik görünüm simüle/benzetim edilecektir.
    • oblique: Metni, normal yazı tipi sürümünün italik olarak görünmesi için simüle/benzetim edilerek görüntülenmesini sağlar.
  • font-weight: Metnin ne kadar kalın olacağını ayarlar. Burada kullanabileceğimiz bir çok terimimiz vardır(-light, -normal, -bold, -extrabold, -black vb.). Fakat bunların içerisinden en çok kullanacaklarımız normal ve bold terimleridir:
    • normal, bold: Yazı tipi genişliğini normal and kalın olarak ayarlar.
    • lighter, bolder: Geçerli öğenin kalınlığını, ebeveynin kalınlığından bir adım daha ince ve daha kalın olacak şekilde ayarlar.
    • 100900: yukarıdakilerden daha hassas kontol sağlayan sayısal kalınlık değerleri.
  • text-transform: Metninizin harf dönüşümlerini kontrol etmek için kullanılır. Alabileceği değerler:
    • none: Herhangi bir dönüşümü engeller.
    • uppercase: Tüm metni BÜYÜK HARFLERE dönüştürür.
    • lowercase: tüm metni küçük harflere dönüştürür.
    • capitalize: Tüm metninizdeki kelimelerin İlk Harflerini Büyük Olacak Şekilde dönüştürür.
    • full-width: Metninizdeki tüm glifleri, tek aralıklı karakterler şeklinde sabit genişlikteki bir kutu içine yazılacak şekilde dönüştürür. Örn. latin karakterlerinin Asya dil glifleriyle (Çince, Japonca, Korece gibi) hizalanmasına izin verir.
    • full-size-kana: Ruby karakterlerinde (Çince, Japonca, Korece gibi) kullanılan küçük yazı tipi boyutlarındaki okunabilirlilik sorunlarını telefai etmek için küçük kana karakterlerini tam boyutlu KANA'ya dönüştürmek için kullanılır.
      ぁぃぅぇぉゕゖっゃゅょゎ -> ぁぃぅぇぉゕゖっゃゅょゎ
  • text-decoration: Metin süslemelerini ayarlar/kaldırır( bunu genelde, bağlantıların altındaki alt çizgiyi kaldımak için kullanırsınız). Mevcut değerleri şunlardır:
    • none: Mevcut olan tüm metin süslemelerini kaldırır.
    • underline: Metnin altını çizer.
    • overline: Metnin üzerine bir çizgi çizer.
    • line-through: Metnin üstüne üst çizgi çizer.
     text-decoration ile aynı anda birden fazla süsleme eklemek istiyorsanız, aynı anda birden fazla değeri kabul edebileceğiniz unutmayın. Örn. text-decoration: underline overline. Ayrıca text-decoration-line, text-decoration-style ve text-decoration-color nitelikleri için text-decoration  niteliği bir kısa tanımdır. İlginç süslemeler oluşturmak için bu nitelikleri farklı şekillerde birleştirirerek  kullanabilirsiniz text-decoration: line-through red wavy.

Örneğimize bu niteliklerden birkaçını ekleyelim:

Görüntünün yeni çıktısı şu şekildedir:

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

Metnin alt gölgeleri

text-shadow niteliğini kullanarak metninize alt gölgeler uygulayabilirsiniz. Bu şekilde metninizin altındaki görsel veya renk ile kontrastını arttırarak okunabilirliliğini yükseltmiş oluruz yada sadece görsellik için kullanırız. Aşağıdaki gibi bu özelliği kullanabilmek için niteliğe en fazla dört değer atanabilir.

text-shadow: 4px 4px 5px red;

Dört özellik aşağıdaki gibidir:

  1. Gölgenin metninize olan yatay uzaklığını belirtir — CSS uzunluk ve ölçü birimlerinin çoğunu alabilir, ancak en yaygın olarak kullanacağımız px birimi olacaktır. Pozitif değer gölgelendirmeyi sağa doğru, negatif eder ise gölgelendirmeyi sola doğru hareket ettirir. Bu değerin bulunması zorunludur.

  2. Gölgenin meninize olan dikey uzaklığını belirtir — CSS uzunluk ve ölçü birimlerinin çoğunu alabilir, ancak en yaygın olarak kullanacağımız px birimi olacaktır. Pozitif değer gölgelendirmeyi aşağıya doğru, negatif eder ise gölgelendirmeyi yukarıya doğru hareket ettirir. Bunun dışında yatay tanımlama ile aynı davranışı sergiler. Bu değerin de bulunması zorunludur.

  3. Bulanıklık yarıçapını tanımlar, gölgenin arka plana geçişini yumuşatmak için kullanırlır — CSS uzunluk ve ölçü birimlerinin çoğunu alabilir, bu değer belirtilmez ise varsıylan olarak 0 değerini alır ve buda bulanıklılığın olmadığı anlamına gelir. Değer yükseldikçe gölge daha geniş bir alana yayılır. Eksi değer alamaz.

  4. Gölgenin temel rengi tanımlanır. Herhangi bir CSS renk değerini alabilir, gölgenin rengi belirtilmez ise geçerli olan renk kullanılır — yani gölgenin rengi öğenin color niteliğinden alınır.

Birden çok gölge

Virgülle ayrılmış birden çok gölge değeri ekleyerek aynı metne birden çok gölge uygulayabilirisiniz, örn.

text-shadow: 1px 1px 1px red,
             2px 2px 1px green;

Bunu <h1> öğemizin içeriği olan 'Tommy the cat' örneğimize uygularsak, şu sonucu görürdük:

Not: CSS ile metinlere ay ışığı gölgelendirmesi dersinde, text-shadow ile ilgili daha ilginç kullanım örnekleri görebilirsiniz.

Metin düzeni

Temel yazı tipi özellikleriyle birlikte metin düzenini etilemek için kullanacağımız özelliklere bir göz atalım.

Metin hizalama

text-align niteliği metin içeren kutunun içerisindeki metnin hizalanmasını kontrol etmek için kullanılır. Mevcut değerler aşağıdaki gibidir ve normal bir kelime işlmeci uygulamasına benzer şekilde çalışır:

  • left: Metni içinde bulunduğu kutunun soluna yaslar
  • right: Metni içinde bulunduğu kutunun sağına yaslar
  • center: Metni içinde bulunduğu kutuya ortalar
  • justify: Metnin satırlarını, içinde bulunduğu kutunun içerik alanının her iki yanına yaslanabilmesi için kelimeler arasındaki boşlukları değiştirerek metni yayar. Bu özelliği kullanırken dikkatli olmanız gerekir — özellikle içerisinde çok uzun bir kelimenin olduğu paragrafların görünümü korkunç olabilir. Eğer bu özelliği kullanmak isterseniz, bununla birlikte hyphens niteliğinide kullanarak, kelimelerin uygun yerlerinden tire "-" işaretiyle fazlalığın bir alt satıra inmesi sağlanarak görünümün daha iyi olması sağlanmalıdır.

<h1> öğemize text-align: center; bildirimini uyguladığımak istediğimde görüntü şu şekilde değişir:

Satır yüksekliği

line-height niteliği metnin her satırının yüksekliğini ayarlar — bu çoğu uzunluk ve boyut birimini alabilir, ancak aynı zamanda çarpan olarak davranan ve genellikle en iyi seçenek olarak kabul edilen birimsiz bir değer de alabilir. Satır yüksekliğini elde etmek için yazı tipi boyutuyla font-size çarpılır. Gövde metni genellikle daha güzel görünür ve satırlar aralandığında okunması daha kolaydır; önerilen satır yüksekliği 1,5-2'dir(çif aralık). Dolayısıyla, metin satırlarımızı yazı tipinin yüksekliğinin 1,6 katına ayarlamak için şunu kullanırsını:

line-height: 1.6;

Bunu örneğimizdeki <p> öğemize uyguladığımızda şu sonucu verir:

Harf ve kelime aralığı

letter-spacing ve word-spacing nitelikleri, metninizdeki harf ve kelimlerin arasındaki boşluğu ayarlamanıza olanak sağlar. Bunları çok sık kullanmayacaksınız, ancak belirli bir görünüm elde etmeleri veya özellikle yoğun bir yazı tipinin okunabilirliğini artırmaları için bir kullanabilirsiniz. Çoğu uzunluk ve boyut birimlerini alabilir.

Örnek olarak, örneğimizdeki her bir <p> öğesinin ilk satırına biraz kelime ve harf aralığı uygulayabiliriz:

p::first-line {
  letter-spacing: 4px;
  word-spacing: 4px;
}

Örneğimize ekleyip soncunun nasıl göründüğüne bir bakalım:

Bakmaya değer diğer nitelikler

Yukarıdaki özellikler size bir web sayfasında metin stilini nasıl belirleyeceğiniz konusunda bir fikir verir, ancak kullanabileceğiniz daha birçok nitelik vardır. Sadece en önemlilerini burada ele almak istedik. Yukarıdakileri kullanmaya alıştığınızda, aşağıdakileri de keşfetmelisiniz.

Yazı tipi stilleri:

  • font-variant: Küçük harfleri, küçük harf yüksekliğinde büyük harflere dönüştürür.
  • font-kerning: Yazı tipinin karakter aralığını açık/kapatır.
  • font-feature-settings: Çeşitli OpenType yazı tipi özelliklerini açık/kapatır.
  • font-variant-alternates: Yazı tipinin alternatif gliflerinin kullanımını kontrol eder.
  • font-variant-caps: Alternatif büyük harf gliflerinin kullanımını kontrol eder.
  • font-variant-east-asian: Japonca ve Çince gibi Doğu Asya alfabeleri için alternatif gliflerin kullanımını kontrol eder.
  • font-variant-ligatures: Metindeki bitişik harflerin görünümünü kontrol eder.
  • font-variant-numeric: Sayılar, kesirler ve sıra işaretçileri için alternatif gliflerin kullanımını kontrol eder.
  • font-variant-position: üst simge veya alt simge olarak konumlandırılmış daha küçük boyutlardaki alternatif gliflerin kullanımını kontrol eder.
  • font-size-adjust: Fontun görsel boyutunu gerçek font boyutundan bağımsız olarak ayarlar.
  • font-stretch: Belirli bir yazı tiğinin olası alternatif uzatılmış versiyonları arasında geçiş yapmamızı sağlar.
  • text-underline-positiontext-decoration-line niteliğinin  underline değeriyle ayarlanan alt çizginin konumunu belirler.
  • text-rendering: Metin görüntülenmek için işlenme aşamısının iyileştirilmesi için kullanılır.

Metin düzeni stilleri:

  • text-indent: Metin içeriğinin ilk satırının başlangıcından önce ne kadar yatay boşluk bırakılması gerektiğini belirler.
  • text-overflow: Taşan içeriğin ne şekilde ele alınacağını belirler.
  • white-space: Öğenin içerisindeki boşlukların ve satır sonlarının nasıl işleneceğini tanımlar.
  • word-break: Sözcüklerin satıra bölünüp bölünmeyeceğini tanımlar.
  • direction: Metin yönünü tanımlar (Bu, kullanılan dile bağlıdır ve genellikle HTML'nin metin içeriğine bağlı olduğu için bu bölümü işlemesine izin vermek daha iyidir.)
  • hyphens: Desteklenen diller için tirelemeye(kesme işareti) izin verir.
  • line-break: Asya dilleri için satır kırmayı gevşetin ve güçlendirin.
  • text-align-last: Zorlanmış satır kesmesinde, bloğun veya bir paragrafın son satırının nasıl hizalanacağını tanımlar.
  • text-orientation: Bir satırdaki metnin yönünü tanımlayın.
  • overflow-wrap:Taşmayı önlemek için tarayıcının kelimeler içindeki satırları kesip kesmeyeceğini belirler..
  • writing-mode: Metin satırlarının yatay mı yoksa dikey mi düzenleneceğini ve sonraki satırların aktığı yönü tanımlar.

Yazı tipi kısa tanımları

font niteliği ile yazı tipinin birçok özelliği tanımlanabilir. Tanımlabilen nitelikler şu sırayla yazılır: font-style, font-variant, font-weight, font-stretch, font-size, line-height ve font-family.

Tüm bu nitelikler arasında sadece font-size ve font-family  kullanılırken font kısa tanımında belirtilmesi gereken bir kullanım vardır.

font-size ve line-height niteliklerinin arasına eğik çizgi konulmalıdır.

Kullanım örneği:

font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;

Aktif öğrenim: metin stilini değiştirin

Bu aktif öğrenme oturumunda, yapabileceğiniz belirli bir alıştırmanız yok. sadece bazı yazı tipi/metin düzeni nitelikleriniyle oyun oynamanızı ve neler üretebileceğinizi görmenizi istiyoruz! Bunu çevrimdışı HTML/CSS dosyalarını kullanarak yapabilir veya kodunuzu aşağıdaki canlı düzenlenebilir örneğe girebilirsiniz.

Bir hata yaparsanız, her zaman Sıfırla düşmesini kullanarak baştan başlayabilirsiniz.

Becerilerinizi test edin!

Bu dersin sonuna geldiniz ve Aktif Öğrenme bölümümüzde zaten bazı beceri tesleri yaptınız, ancak ileriye dönük en önemli bilgileri hatırlayıp/hatırlamadığınızı biliyor musunuz? Dersin sonunda bu konuları öğrendiğini doğrulamak için bazı değerlendirme testleri hazırladık — bkz. Bir topluluk okulunun ana sayfasını düzenleme.

Bu değerlendirme, bu ünitede tartışılan tüm bilgilerini test eder, bu nedenle devam etmeden önce diğer dersleri de okumak isteyebilirsiniz.

Özet

Bu derste metinle oynamaktan keyif aldığınızı umuyoruz! Sonraki ders size HTML listlerinin stilini belirleme konusunda bilmeniz gereken her şeyi açıklayacaktır.

Bu ünitede