CSS3 ve HTML Dersleri | Fontlar ve Özellikleri

CSS Font Stil Özellikleri

Fontlar ve Özellikleri

Bu bölümümüzde CSS üzerinden web sayfalarında kullanılan fontlar, yazı şekillerinden bahsedeceğiz. Genelde yeni başlayanlar için bu konu biraz soru işaretleriyle doludur. Başınıza gelmiştir, siteniz için bir font seçmişsinizdir, harikadır, sanki sizin web siteniz için yaratılmıştır bu fontlar. Local hostunuzda tasarladığınız ve hostinginize yükleyeceğiniz web sayfanızı görüyorsunuz mükemmel, hosting adresinize kopyalıyorsun ve ilk yorumlar geliyor, fontlarınız hiç olmamış, çok basit vs vs.

Sebebi şudur ki, tasarlarken windows klasörü altında bulunan font klasörü tüm kullanıcılarda aynı değildir. Windows’un standart kurulumundaki fontlar genelde sorunsuz olan ve herkesde bulunan fontlardır. Bu fontlar ile tasarlanan bir web sitesi çalışırken büyük bir olasılıklar tüm tarayıcı ve işletim sistemlerinde font yönünden aynı şeklini koruyacaktır. Farklı fontlar kullanmak istersek ne yapmalıyız? Bu soruya cevap vermeden önce font ailelerini biraz tanırsak yerinde olacaktır.

Genel Font Ailesi (Generic Font)

Bazı kaynaklar 3 olarak nitelendirse de bazı kaynaklar 5 genel font ailesinin olduğunu söylerler.

  • Sans
  • Sans-Serif
  • Monospace
  • Cursive 
  • Fantasy

Fontların şekil itibariyle benzemesi ve türetilmesi ile bir font ailesi ortaya çıkmış. Aslında bu durum tasarımcının işini kolaylaştırmaktadır. Eğer tasarladığı font ulaşılamaz ise genel fontu kullanabilmek üzerine kurgulanmıştır. Örnek vermek gerekirse; “Times New Roman” yazı fontu Serif’den, Arial yazı fontu Sans-Serif ve Courier New yazı fontu ise Monospace’den türetildiğinden dolayı bu fontlar kendi ailelerine çok benzemektedir.

Konunun mantığına baktığımızda hiç bir şekilde tasarımcı bir font belirlemez ise tarayıcının varsayılan olarak kullandığı bir font vardır ki bu genellikle Times New Roman’dır. Tasarımcı bir veya birden çok font belirlemişse; ziyaretçinin tarayıcısı siteyle bağlantı kurduğunda bu fontu anlar kullana bilmek için kendi font klasörünü kontrol eder, eğer varsa kullanır. Yoksa 2nci seçeneği oda yoksa 3ncü seçeneği aynı yöntemle değerlendirir, bulursa kullanır bulamazsa varsayılanı kullanacaktır. Bu fontu algılamama veya bulamama gibi durumları ortadan kaldırmak için genel fontlar, hosting’e yüklenen fontlar veya web fontlar (google fonts gibi) kullanılır.

Harici Fontlar Kullanmak (web fonts)

Günümüzde farklı dillerde kullanılan bir çok font bulunmaktadır. Şimdi sorumuza geri dönersek, farklı fontlar kullanmak istersek ne yapacağız? Bunun için burada 2 yöntemden bahsedeceğiz. Birincisi herhangi bir yerden kendimize lisanslanmamış (telif hakkı olmayan) türkçe karakterlere uygun bir font bulacağız. http://www.fonttr.com adresinden veya https://fonts.google.com/ adresinden bu font dosyalarını indirerek çalışma klasörünüze kopyalayabilirsiniz. Diğer bir yöntem ise (bunun için güvenli olması açısından google fonts kullanacağız) bu font dosyaların bulunduğu konumlara link vereceğiz. Sonraki yapacağımız işlem mantıken bu dosyayı bizim sitemizle bağlantı kurmaya çalışan ziyaretçiye gösterebilmek olmalı.

<!DOCTYPE html>
<html>
<head>
<title>Font Özellikleri</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Merienda" rel="stylesheet">
<meta charset="utf-8">
</head>
<body>
<!-- HARİCİ FONT KULLANMA METODU 1 -->
<h2>Genel Font</h2>
<div class="genelFont">
Bu metin body'ye uygulanmış font family'i kullanıyor
</div>
<hr>
<h2>Google Font kullanarak web üzerinden font kullanıyor</h2>
<div class="webfont1">
Metnin nasıl göründüğünü görmek iyidir.
ÖÖÇÇŞŞİİĞĞÜÜ - !'^+%&/()=?_
123456790
ABCÇDEFGĞHIİJKLMNOÖPQRSŞTUÜVWXYZ
abcçdefgğhijklmnoöpqrsştuüvwxyz
</div>
<hr>
<h2>Hosting Üzerindeki Font Dosyasından</h2>
<div class="hostfont">
Hosting'e kopyalanmış bir font dosyası ile çalışıyor.
ÖÖÇÇŞŞİİĞĞÜÜ - !'^+%&/()=?_
123456790
ABCÇDEFGĞHIİJKLMNOÖPQRSŞTUÜVWXYZ
abcçdefgğhijklmnoöpqrsştuüvwxyz
</div>
</body>
</html>

body{
font-family: arial, helvetica, sans-serif;
}

Yukarıdaki stil dosyasını incelediğimizde <body> etiketi için font-family özelliğine ilk olarak arial ikinci olarak helvetica, üçüncü olarak sans-serif atanmıştır.


/* Web üzerinden Google Fonts'dan font kullanmak */

.webfont1{
font-family: Merienda, serif;
}

Yukarıdaki örneğe baktığımızda ana index.html dosyamızda google fonts için bir link verilmiş ve href değerine Merienda yazı fontuna ulaşılacak url yazılmıştır. CSS dosyamızda artık bu font-family’i kullanabiliriz. Google Fonts kullanmak bu kadar kolay.

Harici Fontlar Kullanmak (Hosting’e Gömmek)

Diğer bir yöntem ise hosting’inize font dosyalarını kopyalayıp bunların seçilmesi sağlama yönünde olur. Tüm tarayıcılarda günümüzde kullanılan font dosya türleri TTF, OTF, WOFF’dur. Diğer dosya türlerinin çalışıp çalışmadığını da tarayıcıların teknik özelliklerinden kontrol edebilirsiniz.

Öncelikle yapmamız gereken elimizdeki font dosyalarına bir font-family ismi yaratmalıyız. Bunu CSS ile aşağıdaki örnekteki gibi @font-face deklarasyonu ile sağlayabiliriz.


/* Hostingden Font Dosyasını Kullanmak */
@font-face{
font-family: myHostfont;
src: url('Combo-Regular.ttf');
}
.hostfont{
font-family: myHostfont, sans-serif;
}

Etiketlere Font Stili Atama (font-style)

Fontlara uygulanabilecek aslında 2 çeşit değer var. Normal ve italic. Font-style özelliğinin aldığı bir değer de “oblique”, fakat bu stil italic yazı karakterinin aynısı denebilir.


/*Fontlara stil ataması*/
.normal{font-style: normal;}
.italic{font-style: italic;}
.oblique{font-style: oblique;}

Yazı Fontlarının Büyüklüğü (font-size)

Font-size özelliğine px, em, pt cinsinden değerler atayabiliriz. Aralarındaki ilişkiden bahsedersek 16px = 1em = 12pt eşitliği söz konusudur. Aşağıdaki örnekte farklı cinsteki büyüklüklere eşitlik değerleri verilerek yazıların büyüklüklerinin eşit olduğu görülmektedir.


/*font-size font büyüklüğü*/
.px{font-size: 16px;}
.em{font-size: 1em;}
.pt{font-size: 12pt;}
/* Font-size responsive */
.vw{font-size: 2vw;}

Yukarıdaki örneğin son satırı responsive görünüm sağlayan vw (viewport width) cinsidir. Tarayıcı sayfanızın genişliğine göre yazı karakterleri büyüyüp küçülmektedir.

Yazı Fontlarının Kalınlığı (font-weight)

Font, yazı kalınlıkları 4 değer alır. Normal, lighter, bold ve 100 ila 900 arasında bir değer alarak inceden kalına görükür. Aşağıdaki örnekte tüm değerler gösterilmiştir.


/*font-weight font kalınlığı*/
.normal{font-weight: normal;}
.lighter{font-weight: lighter;}
.bold{font-weight: bold;}
.number{font-weight: 900;}

Yazı Fontlarının Değişimi (font-variant)

Font-variant özelliğinin alacağı ilk değer normal diğeri small-caps dir. Small-caps değeri alan bu özellik stilin uygulandığı etiketteki yazı karakterlerin küçük harfle yazılmış olanların hepsini büyük harfe dönüştürür. Ancak dönüştürülen bu harflerden hiçbiri orijinal olarak yazılan büyük harfler kadar büyümezler. Görüntüde baş harfleri daha büyük olan ama komple büyük harf kullanılarak yazılmış bir metne benzer.


/*Font-variant*/
.normal{font-variant: normal;}
.small-caps{font-variant: small-caps;}

Font Özelliğinin Kısa Yazılması

Font özelliği yukarıdaki anlatılan bir çok başlığı tek satırda kendi bünyesinde barındırabilir. Yazım şekli:

font: font-style font-variant font-weight font-size/line-height font-family son (6ncı) argüman olarakta caption | icon | menu | message-box | small-caption | statur-bar | initial | inherit değerlerinden birini alır. Alması konusunda zorunlu bir kural yoktur. Aşağıdaki örenkte son argüman kullanılmamıştır.


/*font: için Kısa yazım metodu*/
.kisa-yazi{
font: italic small-caps bold 20px/30px Merienda, serif;
}

Bir önceki Text Yazı Özellikleri konulu yazımı incelemek için tıklayınız…

HTML derslerine ait tüm yazılara ulaşmak için tıklayınız…

Olmalısın giriş yapmış yorum yazmak için

Proudly powered by WordPress   Premium Style Theme by www.gopiplus.com