CSS Serisi – 3) CSS Örnekleri 1.3 Yazı Tipleri

1.454 kez okundu

Merhaba arkadaşlar, CSS Tanımını, Kullanımını ve CSS Örneklerini paylaşacağım “CSS Serisi” makalelerine “CSS Örnekleri” ile devam ediyoruz. “CSS Nedir?” diye merak eden arkadaşlar ilk yazıyı, “CSS Kullanımını” öğrenmek isteyen arkadaşlar da ikinci yazıyı inceleyebilirler.

wordle-css

CSS Yazı Tipleri

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.

Kullanımı:

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:

h2 { font-size: 12pt; }

14 piksellik bir yüksekliğe sahip yazı istiyorsak:

h2 { font-size: 14px; }

Varsayılan yazı tipinin %150 fazlasını EM ile belirtirsek:

h2 { font-size: 1.5em; }

Yukarıdaki örneği yüzde ile ifade etmek isteseydik:

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.

h2 { font-style: italic; }

Eğer italik bir yazıyı iptal edeceksek aşağıdaki kodu yazmalıyız:

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.

h2 { font-weight: bold; }

Eğer kalın bir yazıyı normal haline dönüştüreceksek aşağıdaki kodu yazmalıyız:

h2 { font-weight: normal; }

Evet arkadaşlar bu yazımda sizlere “CSS ile Yazı Tipi Örnekleri” hakkında bilgi vermeye çalıştım. Soru ve önerilerinizi yorum olarak ya da e-mail göndererek iletebilirsiniz, teşekkürler.

Kaynak: CSS.sitesi.web.tr

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Time limit is exhausted. Please reload CAPTCHA.

Tipobe365 Giriş