HTML sayfanızda kullandığınız yazıların yazı tipi özelliklerini nasıl değiştirebileceğiniz hakkında bilgi.
Yazı tiplerini biçimlendirirken en sık kullandığımız komutlar:
- font-family
- font-size
- font-style
- font-weight
font-family: Yazı Tipi Belirlemek
Yazı tipleri klasörümüzü açtığımızda birçok yazı tipi görürüz. Bunları
HTML sayfamızda kullanmak için adını belirtmemiz gerekir. İşte bu kod yazı tipi seçmemizde bize yardımcı olacaktır.
Kod
h1 { font-family: Times New Roman; }
p { font-family: Times New Roman, Arial, Helvatica; }
a { font-family: Sans-serif; } Yukarıdaki birinci örnekte sadece tek yazı tipi adı belirttik (
Times New Roman), ancak bir sonrakinde aralarına virgül koyarak daha fazla belirttik. Bu tarz kullanımlarda öncelikle dikkate alınan ilk verdiğimiz yazı tipi olacaktır. Eğer verdiğimiz yazı tipi o kullanıcıda yoksa bir sonraki ile görüntülenecektir.
font-size: Yazının Büyüklüğü (Puntosu)
Yazı büyüklüğünü font-size ile belirtiriz. Ölçü birimi olarak aşağıdakileri kullanabiliriz:
- % : yüzde olarak belirtmek
- in : inç olarak belirtmek
- cm : santim olarak belirtmek
- mm : milimetre olarak belirtmek
- em : varsayılan yazı büyüklüğüne göre oranlamak
- pt : punto olarak belirtmek
- px : piksel olarak belirtmek
Örneğin yazımızın
12 punto olması için yazmamız gereken komut:
Kod
h2 { font-size: 12pt; } 14 piksellik bir yüksekliğe sahip yazı istiyorsak:
Kod
h2 { font-size: 14px; } Varsayılan yazı tipinin
%150 fazlasını
EM ile belirtirsek:
Kod
h2 { font-size: 1.5em; } Yukarıdaki örneği yüzde ile ifade etmek isteseydik:
Kod
h2 { font-size: 150%; } font-style: İtalik (Sağa Yatık) Yazmak
Yazımızın sağa yatık (
italic) olması için aşağıdaki kodu kullanabiliriz.
Kod
h2 { font-style: italic; } Eğer italik bir yazıyı iptal edeceksek aşağıdaki kodu yazmalıyız:
Kod
h2 { font-style: normal; } font-weight: Kalın Yazmak
Yazımızın kalın (
bold) olmasını istiyorsak aşağıdaki kodu kullanmalıyız.
Kod
h2 { font-weight: bold; } Eğer kalın bir yazıyı normal haline dönüştüreceksek aşağıdaki kodu yazmalıyız:
Kod
h2 { font-weight: normal; }