Beytullah Toprak
CSS Temel - CSS Yazı Tipleri (Fonts)

CSS Temel - CSS Yazı Tipleri (Fonts)


CSS yazı tipi özellikleri, bir metnin yazı tipini, boyutunu ve kalınlığını vb. Beğendiğiniz yazı tipleri için çeşitli stiller ayarlamanıza olanak tanır.

Yazı Tipi Özellikleri

CSS gibi metin içeriğinin yazı stil için çeşitli özelliklerini sağlar: font-familyfont-stylefont-variantfont-weight ve font-size. Aşağıdaki bölüm de, bu özelliklerin her birini tek tek tanımlayacaktır.

Font Ailesi (font-family)

Bir metnin yazı tipi ailesi "font-family" özelliği ile ayarlanır. "font-family" özelliği kullanılırken yedek olarak bir kaç font ailesi daha eklemek tedbir bakımından iyi olur. Eğer tarayıcı ilk font ailesini desteklemiyorsa, bir sonra ki font ailesini kullanır.

Not: Eğer bir font ailesinin adı bir kelimeden fazla ise tırnak işaretleri içine alınmalıdır ve font aileleri virgül ile ayrılmalıdır.

p {
    font-family: "Times New Roman", Times, serif;
}

[codepen_embed height="439" theme_id="dark" slug_hash="morVMv" default_tab="html,result" user="antrode-toprak"]See the Pen <a href='https://codepen.io/antrode-toprak/pen/morVMv/'>morVMv</a> by Antrode Toprak (<a href='https://codepen.io/antrode-toprak'>@antrode-toprak</a>) on <a href='https://codepen.io'>CodePen</a>.[/codepen_embed]

Yazı Stili (font-style)

font-style Nitelik bir elemanın metin içeriği için yazı tipi stilini ayarlar.

Bu özellik için olası değerler şunlardır: normalitalic veya oblique.

<!DOCTYPE html>
<html lang="tr">
<head>
  <title>CSS font-style Örneği</title>
  <style type="text/css">  
    p.bir {
        font-style: normal;
    }
    p.iki {
        font-style: italic;
    }
    p.uc {
        font-style: oblique;
    }
  </style>
</head>
<body>
  <p class="bir">Bu bir normal paragraf.</p>
  <p class="iki">Bu italik stilli bir paragraf.</p>
  <p class="uc">Bu oblique uygulanmış paragraf.</p>
</body>
</html>

Yazı Boyutu (font-size)

font-size Nitelik bir elemanın metin içeriği için yazı tipi boyutunu ayarlar.

Yazı tipi boyutu değerlerini, örneğin anahtar kelimeler, pikseller veya ems ile belirtmenin birkaç yolu vardır.

Anahtar Kelimelerle Yazı Tipi Boyutunu Ayarlama

Gövde öğesinde bir anahtar kelime yazı tipi boyutu ayarlayarak, sayfanın başka bir yerinde göreceli yazı tipi boyutlandırma ayarlayarak, yazı tipini tüm sayfada uygun şekilde yukarı veya aşağı kolayca ölçekleyebilmenizi sağlar. : Mutlak büyüklüğü aşağıdaki anahtar kelimelerden birini kullanarak belirtilir xx-smallx-smallsmallmediumlargex-largexx-large.

Aşağıdaki anahtar kelimelerden biri kullanılarak göreceli bir boyut belirtilir: smallerlarger.

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

Yazı Tipi Boyutunun Pikselle Ayarlanma

Yazı tipi boyutunu piksel değerlerinde (örneğin, 12px, 16px vb.) ayarlamak, piksel doğruluğuna ihtiyacınız olduğunda iyi bir seçimdir. Ancak, benzer etkiyi elde etmek için farklı algoritmalar kullandıkları için sonuçlar tarayıcılar arasında bir dereceye kadar değişebilir.

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}
div {
    font-size: 30px;
}

Yüzde ve Em Kombinasyonunu Kullanma

Tüm tarayıcılarda benzer etkiyi elde etmenin çözümü font-size, gövde elemanı için yüzde olarak bir varsayılan belirlemektir. Popüler bir teknik, font-size vücudu  62.5% (varsayılan 16px'in % 62.5'idir), yani 10px'e veya 0.625em'e ayarlamaktır.

Kolay hatırlanması dönüşüm, em birimlerini kullanarak herhangi elemanları px tarafından bu şekilde  10px = 1em12px = 1.2em14px = 1.4em16px = 1.6emvb, vb.  dönüştürülebilir.

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.6em;    /* 1.6em = 16px */
}

İpucu: World Wide Web konsorsiyumun (W3C) daha sağlam ve ölçeklenebilir düzenleri oluşturmak amacıyla em veya yüzde (%) değerleri kullanmanızı önerir.

Yazı Tipi Ağırlığı (font-weigh)

font-weight Mülkiyet yazı ağırlığını veya cesaret belirtir.

Font-style özelliğinin Olası değerler şunlardır: normalboldbolderlighter100200300400500600700800900

  • Sayısal değerler 100900 arasında her sayının öncekinden daha koyu bir ağırlığı (kalınlığını) temsil ettiği font ağırlıklarını (kalınlığını) belirtin.
<!DOCTYPE html>
<html lang="tr">
<head>
  <title>CSS font-weight Örneği</title>
  <style type="text/css">
    p {
        font-weight: bold;
    }
  </style>
</head>
<body>
  <p>Bu bir bold paragrafı.</p>
</body>
</html>

Yazı tiplerinin çoğu yalnızca sınırlı sayıda ağırlıkta bulunduğundan; genellikle sadece normal ve bold renkte bulunurlar . Yazı tipi belirtilen ağırlıkta mevcut değilse, en yakın uygun ağırlıkta bir alternatif seçilecektir.

Yazı Tipi Varyantı (font-variant)

font-variant Mülkiyet metin özel küçük kapaklar varyasyon görüntülenmesini sağlar.

Bir öğenin font değişkeninin nasıl ayarlanacağını gösterir. Olası değerler normal ve small-caps.

<!DOCTYPE html>
<html lang="tr">
<head>
  <title>CSS font-variant Örneği</title>
  <style type="text/css">
    p {
        font-variant: small-caps;
    }
  </style>
</head>
<body>
  <p>Deneme bir paragraf.</p>
</body>
</html>

Yorum (0)

Hiç Bir Yorum Bulunamadı. İlk Yorumuz Siz Yapın :)

Yorum Yap