CSS Font-Face Kullanımı
Merhaba Arkadaşlar,
Bu makalede sizlere her tasarımın derdine deva olan CSS ile Font Face işlemini gerçekleştirmeyi uygulamasını da göstererek anlatacağım. İlk olarak Font-Face ‘in ne olduğu ve ne amaçla kullanıldığı hakkında bahsetmek istiyorum. Bir müşterimizin isteği üzerine bir web sitesi yaptığımızı düşünelim. Bu web sayfası içerisinde genellikle ” Arial ” , ” Tahoma ” gibi her bilgisayarda olan yazı fontlarını kullanırız. Ama Header , Menü , Footer gibi içerik alanı dışında kalan bölümlerin bir veya birden fazlasını değişik ve daha göz alıcı bir yazı fontu ile oluştursak kötü mü olurdu ? 🙂
Normal şartlarda basit bir çözümleme yaparsak istediğimiz yazı font ‘ unu kendi bilgisayarımıza yükleyerek sayfamızı oluşturduğumuzda ” Yerel ( LocalHost ) ” de çalıştırarak istediğimiz sonucu alabiliriz. Ama bu web sayfalarını sunucumuza yükleyip bir arkadaşımıza sayfa linkini gönderdiğimizde istediğimiz sonucu o alamayacaktır. Bunun gibi sebeplerden dolayı CSS yardımı ile sayfamıza bu yazı tipini entegre ederek siteye giren herkesin aynı sonuç ile karşılaşmasını sağlamamız gerekmektedir. Şimdi basit bir uygulama yaparak bu işlemin nasıl gerçekleştirilebildiğini daha iyi kavrayacağız.
İlk olarak kendimize bir klasör yaratıyoruz ve içerisine ” index.html ” ile ” stil.css ” sayfalarını oluşturuyoruz ve içeriklerini hazırlamak üzere herhangi bir düzenleme programı ile açarak kodlamaya geçiyoruz. İlk olarak index sayfamız içerisinde ana kısımları oluşturaraktag ‘leri içerisine ” Bu Yazı Yeni Font Sayesinde Değişecektir ” yazıyoruz ve kodlar şu şekilde bir hal almış oluyor.
<!DOCTYPE html>
<html>
<head>
<title>BilgiSayaci.Org - CSS Font-Face Kullanımı</title>
<link rel="stylesheet" type="text/css" href="stil.css" />
</head>
<body>
Bu Yazı Yeni Font Sayesinde Değişecektir
</body>
</html>
Herhangi bir farklı işlem yapmadan index sayfamızı çalıştırdığımızda herhangi bir göz alıcılığı olmayan sade bir yazı tipi ile karşılaşacağız. Şimdi ise asıl işlemimizi yapabilmek için internetten bir font indireceğiz ve daha sonra bunu CSS yardımı ile kendi stil dosyamıza çekeceğiz.
Font indirebilmek için internette bir çok site bulunmaktadır. Benim önerebileceğim ve bu uygulamada kullanacağımız font ‘ u indireceğimiz sitenin adresi ” http://www.fontsquirrel.com/fontface ” dur. Bu linke giriyoruz ve istediğimiz bir font ‘ u ” View Font ” butonuna tıkladıktan sonra açılan sayafa da ” Download TTF ” butonuna tıklayarak bilgisayarımıza indiriyoruz. Uygulamamızda ” Deutsch Gothic ” font ‘ unu kullanıyoruz. İndirilen ” .rar ” dosyası içerisinden font ‘ u çıkarıyoruz. Şimdi gireceğimiz link ise ” http://www.fontsquirrel.com/fontface/generator ” olacaktır. Adrese girdikten sonra bir form göreceğiz. Bu form da ilk olarak üst bölümdeki ” Add Fonts ” butonuna tıklayarak indirdiğimiz Font ‘ umuzu Upload ediyoruz. Daha sonrada form da ki işaretleme işlemlerini aşşağıdaki resim ile aynı şekilde düzenleyerek ” Download Your Kit ” butonuna tıklayıp dosyamızı indiriyoruz.
İndirilen klasörü açtığımızda önümüze bir çok dosya gelecektir. Bunlar içerisinden ” stylesheet.css ” isimli sayfayı açıyoruz ve içerisindeki font face kod blogunu kendi stil sayfamız içerisine ekliyoruz. Kod şu şekilde olacaktır :
@font-face {
font-family: 'deutsch_gothicnormal';
src: url('deutsch-webfont.eot');
src: url('deutsch-webfont.eot?#iefix') format('embedded-opentype'),
url('deutsch-webfont.woff') format('woff'),
url('deutsch-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
Daha sonra kodu incelediğimizde url satırlarında bazı path ‘ leri göreceğiz. İşte bu path ‘lerde varolan dosyaları da alarak stil dosyamızın hemen yanına ekliyoruz. İşlemimiz artık tamamlanmış olacaktır. Şu anda sayfa içerisinde tek bir satır olduğu için herhangi bir id veya class içerisine alarak yazmamıştık. Bunun için CSS dosyamızda ” font-family ” i belirlerken tümünü kapsamak anlamına gelen ” * ” işaretini kullanıyoruz ve şu şekilde bir satır ekliyoruz.
*{font-family: 'deutsch_gothicnormal';}
Bunu da stil dosyamıza ekledikten sonra kaydediyoruz ve index sayfamızı yeniden çalıştırarak başarılı sonucu görüyoruz.
Stil.css sayfamızın son hali şu şekilde olacaktır :
@font-face {
font-family: 'deutsch_gothicnormal';
src: url('deutsch-webfont.eot');
src: url('deutsch-webfont.eot?#iefix') format('embedded-opentype'),
url('deutsch-webfont.woff') format('woff'),
url('deutsch-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
*{font-family: 'deutsch_gothicnormal';}
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 23 No ‘lu Maddeden İndirebilirsiniz..
Tüm Yorumlar