Webbilim.com'da çeşitli içerikler yer almaktadır. Nasıl yapılır, Nasıl içilir v.s. gibi tavsiyelere yer verilmektedir. Kendimiz için güzel gördüğümüz veya olsa iyi olurdu dediğimiz şeyleri sizler için derliyoruz..
Anasayfa / Webmaster / CSS / CSS ile Yazı Font Özellikleri

CSS ile Yazı Font Özellikleri

Font özellikleri sayfalarımızdaki metinlerin font ailesini, kalınlık ayarlarını, boyutunu, büyük-küçük harf olmasını ve stilini değiştirmemizi sağlar. CSS ise fontlar üzerinde tam hakim olmamızı sağlar.

Bu özellikleri websitenizde mutlaka kullanmanızı tavsiye ediyoruz. Doğru kullanım için aşağıdaki örneklemeleri inceleyiniz.

 

YazıTipi Aileleri:

CSS’de, yazıtipi aileleri iki temel gruba ayrılır:

  • Jenerik aile (generic family): Benzer görünüşteki yazıtipi ailesi (“Serif” ile “Monospace” gibi).
  • Yazıtipi ailesi (font family): Spesifik bir yazıtipi ailesi (“Times New Roman” veya “Courier” gibi).

Jenerik Aile

YazıTipi Ailesi

Açıklama

Serif

Times New Roman

Gürcistan

Serifli yazıtipleri karakterlerin sonunda yer alan küçük çizgi ve kuyruklarla sonlanır.
Sans-serif

Arial

Verdana

“Sans” Fransızca bir sözcük olup “olmaksızın” anlamına gelir. Bu aile karakter sonlarında çizgiler ve kuyruklar içermez.

İnsanlar Taşıyıcı

Kurye Yeni

Lucida Konsol

Tüm monospace karakterler aynı genişliktedir.

 

YazıTipi Ailesi:

Bir metnin yazıtipi ailesi, font-family özelliğiyle atanır. font-family özelliği, çeşitli yazıtipi adlarını bir yedek sistem gibi tutmalıdır. Tarayıcı ilk yazıtipini desteklemiyorsa bir sonraki yazıtipi (font) devreye sokulmalıdır. Yazıtipi ailesi birden fazla sözcükten oluşuyorsa çift tırnak sembolleri arasına alabilirsiniz.

Birden fazla yazıtipi ailesi varsa, virgüllerle ayrılmalıdır:

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

<! DOCTYPE html> 
<html> 
<head> 
<style> 
p.serif { 
font-family: "Times New Roman", Times, serif; 
} 

p.sansserif { 
font-aile: Arial, Helvetica, sans-serif; 
} 

</ style> 
</ head> 

<body> 
<h1> CSS FONT AILESI </ h1> 
<p class = "serif"> Times New Roman yazı tipi ILE YAZILDI </ p> 
<p class = "sansserif"> Arial fontu ILE YAZILDI. </ P> 
</ body> 

</ html>

 

YazıTipi Stili:

Font-style özelliği genellikle eğik bir metin oluşturmak için kullanılır. Bu özelliğin üç farklı değeri vardır:

  1. normal: Metin normal görünür.
  2. italic: Metin italik (eğik yazı) olarak görünür.
  3. oblique: Metin biraz eğilmiş (italiğe çok benzer) olarak görünür.
p.normal { 
font-style: normal; 
} 

P.italic { 
font-style: italic; 
} 

P.oblique { 
font-style: eğik; 
}

Şimdi her üç durumu içeren bir kod parçacığı yazalım:

<! DOCTYPE html> 
<html> 
<head> 
<style> 
p.normal { 
font-style: normal; 
} 

P.italic { 
font-style: italic; 
} 

P.oblique { 
font-style: eğik; 
} 

</ style> 
</ head> 

<body> 
<p class = "normal"> NORMAL YAZI </ p> 
<p class = "italik"> ITALIC YAZI </ p> 
<p class = "eğik"> OBLIQUE YAZI </ p> 
</ body> 
</ html>

 

YazıTipi Boyutu:

Font-size özelliği, metnin harf boyutunu belirler. Bir sayfa içindeki <p> elemanlarını font-size ile <h> elemanlarına dönüştürmeyiniz ya da tersini yapmayınız. Başlıklar için daima HTML <h1>…<h6> etiketlerini, paragraflar içinse <p> etiketlerini kullanınız.

Font-size, mutlak (absolute) ya da göreceli (relative) olabilir.

Mutlak boyut:

  • Metni belirtilen boyuta dönüştürür.
  • Kullanıcının metnin boyutunu her tarayıcıda değiştirilmesine izin vermez.
  • Çıktının fiziksel boyutu biliniyorsa faydalıdır.

Göreceli boyut:

  • İlgili elemanların boyutunu mutlak olarak değil göreceli olarak belirler.
  • Kullanıcıya, tarayıcılarda metnin boyutunu değiştirmesi için izin verir.

YazıTipi boyutunu piksel cinsinden atamak:

Metin boyutunu piksel (px) cinsinden atarsanız, metin boyutu üzerinde tam kontrol sağlayabilirsiniz.

h1 { 
font-size: 50px; 
} 

H2 { 
yazı tipi boyutu: 40px; 
} 

p { 
font-size: 15px; 
} 

<! DOCTYPE html> 
<html> 
<head> 
<style> h1 { 
font-size: 50px; 
} 

H2 { 
yazı tipi boyutu: 40px; 
} 

p { 
font-size: 15px; 
} </ style> 

</ head> 

<body> 
<h1> BASLIK 1 </ h1> 
<h2> BASLIK 2 </ h2> 
<p> PARAGRAF </ p> 
<p> DIGER PARAGRAF </ p> 
</ body > 
</ html>

 

YazıTipi boyutunu (em) birimi kullanarak atamak:

Kullanıcıların, kullandıkları tarayıcının menüsünden metni yeniden boyutlandırabilmelerine (resize) olanak sağlamak amacıyla, birçok yazılım geliştirici piksel yerine em birimini kullanmayı tercih eder. em boyut birimi, W3C tarafından da önerilmektedir. Tarayıcılarda varsayılan metin boyutu 16px’tir. Buna göre, 1 em=16px olarak kullanılır.

h1 { 
font-boyutu: 3.125em; / * 50px / 16 = 2.5em * /
 } 

h2 { 
font-boyutu: 2.5em; / * 40px / 16 = 2.5 * /
 } 

p { 
font-boyutu: 0.9375em; / * 15px / 16 = 0.9375em * /
 } 

<! DOCTYPE html> 
<html> 
<head> 
<style> 

h1 { 
font-boyutu: 3.125em; / * 50px / 16 = 2.5em * / 
} 

h2 { 
font-boyutu: 2.5em; / * 40px / 16 = 2.5 * / 
} 

p { 
font-boyutu: 0.9375em; / * 15px / 16 = 0.9375em * / 
} 

</ style> 
</ head> 

<body> 
<h1> BASLIK 1 </ h1> 
<h2> BASLIK 2 </ h2> 
<p> PARAGRAF </ p> 
<p > ESKI SURUMLERDE PROBLEM OLABİLİR <


</ Html>

 

(Yüzde) ve (em) ikilisiyle boyut ayarı:

<body> elemanına konacak yüzde türünde varsayılan yazıtipi (font) boyutu, tarayıcılarda boyut değiştirme konusunda karşılaşılan problemleri çözer.

vücut { 
font-size: 100%; 
} 

H1 { 
yazı tipi boyutu: 3.125em; / * 50px / 16 = 2.5em * /
 } 

h2 { 
font-boyutu: 2.5em; / * 40px / 16 = 2.5 * /
 } 

p { 
font-boyutu: 0.9375em; / * 15px / 16 = 0.9375em * /
 }
Özellik Açıklama
yapmak Tek bir bildirimde tüm yazıtipi özelliklerinin atanmasını sağlar.

font ailesi

Bir metin için yazıtipi ailesini belirler.

yazı Boyutu

Metnin yazıtipi boyutunu belirler.

yazı stili

Metin için yazıtipi stilini belirler.
Font-variant Bir metnin küçük veya büyük harflerle görüntüleneceğini belirler.
yazı ağırlıklı Yazıtipinin ağırlığını belirler.

İlginizi Çekebilir

10 Ekim Windows 10 güncellemesini sakın yüklemeyin!

Microsoft ’10 Ekim Windows 10 güncelmemesini yüklemeyin’ uyarısı yayınladı. Microsoft etkinliğinde tanıtılan yeni Windows 10 …

Bir cevap yazın

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

WeBBilim.Com