Yazı Tipi Ailesi

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 18 / 76.

CSS'te font-family özelliği, bir HTML öğesindeki metin için yazı tipini belirtmek amacıyla kullanılır. Bu özellik, metniniz için tercih edilen yazı tiplerini listelemenizi sağlar. İlk yazı tipi mevcut değilse tarayıcı, benzer bir görünüm sağlamak için listedeki bir sonrakini kullanır.

font-family özelliğini kullanmak için temel sözdizimi şöyledir:

selector {
    font-family: font1, font2, generic-family;
}

font1, font2: Tercih edilen yazı tipi ailesi adları, tercih sırasına göre listelenmiştir. Eğer font1 mevcut değilse, tarayıcı font2'yi deneyecektir ve bu şekilde devam edecektir.

generic-family: serif, sans-serif, monospace, cursive veya fantasy gibi genel bir yazı tipi ailesi adıdır. Bu, belirtilen yazı tiplerinden hiçbiri mevcut değilse bir yedek görevi görür.

Yazı tipi ailesi adlarını belirtirken, şu yönergelere uymak önemlidir:

Bir yazı tipi ailesi adı boşluk içeriyorsa, tırnak işaretleri içine alınmalıdır (örneğin, "Times New Roman", "Courier New").

Birden fazla yazı tipi ailesi adı virgülle ayrılmalıdır.

Belirtilen yazı tiplerinden hiçbirinin mevcut olmaması durumunda uygun bir yedeğin kullanılmasını sağlamak için, listenin son seçeneği olarak genel bir yazı tipi ailesi eklemek iyi bir uygulamadır.

Örneğin:

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

Görev

Kolay

Bir başlık (<h1>) ve bir paragraf (<p>) içeren bir HTML belgesi size verilmiştir. Göreviniz, bu öğeleri stillendirmek için font-family özelliğini kullanmaktır. Aşağıdaki adımları izleyin:

<h1> öğesini hedefleyen bir CSS kuralı yazın. font-family değerini "Times New Roman", Times, serif olarak ayarlayın.
<p> öğesini hedefleyen bir CSS kuralı yazın. font-family değerini Arial, Helvetica, sans-serif olarak ayarlayın.

Kendin dene

<html>
<head>
    <title>Font Family</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>