Yazı Tipi Ailesi

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 18 / 76.

CSS'de, font-family özelliği bir HTML öğesi içindeki metnin yazı tipini belirtmek için kullanılır. Bu özellik, metniniz için tercih edilen yazı tiplerini listelemenize olanak tanır. Eğer ilk yazı tipi mevcut değilse, tarayıcı listedeki bir sonrakini kullanarak benzer bir görünüm sağlar.

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.

Kopya kağıdı

font-family özelliği, metin için yazı tipini belirtir. Tercih edilen yazı tiplerini sırayla listeleyin - eğer ilki mevcut değilse, tarayıcı bir sonrakini kullanır.

Temel sözdizimi:

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

Yönergeler:

Boşluk içeren yazı tipi adları tırnak işareti gerektirir: "Times New Roman"
Birden fazla yazı tipini virgülle ayırın
Yedek olarak genel bir aile (serif, sans-serif, monospace, cursive, fantasy) ekleyin

Örnek:

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

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>