Css ile Özel Font Kullanımı @font-face

21 Haziran 2015

minimalcoding

3008 0

Css ile Özel Font Kullanımı @font-face

Tasarlanan web sitelerinde kullanılan özel fontlar (yazı tipi) tasarım bütünlüğü oluşturmaktır.Tasarımda kullanılan özel font yapısı kulanıcıların bilgisayarlarında yüklü olmayabilir ve site kullanıcılarının siteyi sistem fontlarıyla görüntülemesine neden olur. Bu da tasarım bütünlüğünü ortadan kaldırır. Hiçbir site sahibi ve tasarımcı bunun böyle olmasını istemez. Artık bir çok firmada kendi markasıyla bütünleşmiş fontların web sitelerinde kullanılmasını talep etmektedir. Peki kullanıcıların bilgisayarlarında olmayan bu özel font yapısını nasıl göstereceğiz? İşte tam bu noktada CSS @font-face yapısı sorunumuza çözüm olmaktadır (kullanımı için yazının devamına bkz). CSS2 ile gelen bu özellik yazı tiplerinde yaşanan telif hakları sıkıntısından dolayı CSS 2.1 de kaldırılsada CSS3 ile bu sorun çözülmüştür. Tam her şeyi çözdük derken karşımıza farklı tarayıcıların desteklediği farklı font dosyası uzantıları çıkmaktadır. Peki bu font dosya uzantıları ve bu uzantılara bağlı masaüstü ve mobil tarayıcı destekleri nelerdir?

Font dosyası uzantıları

.eot(Embedded OpenType) uzantılı dosya türü ; web sayfalarında kullanılmak üzere oluşturulmuş Microsoft tarafından desteklenen dosya uzantı türüdür. Sadece internet explorer destekler
.ttf (TrueType Font) uzantılı dosya türü ; günümüzde en yaygın yazı tipi biçimlerinden biridir ama artık yerini .otf’ye (Open Type Font) bırakmaktadır. .otf 2007 yılından beri Adobe ve Microsoft ortak teknolojisi olarak karşımıza çıkmaktadır, tek bir yazı tipi içinde 65.535 glyph (grafiksel yazı karakteri öğesi) barındırabilmekte ve ayrıca Unicode altyapısına dayanan sistematiğiyle zengin bir dil ailesine de destek sağlamaktadır.
.svg (Scalable Vector Grafik) uzantılı dosya türü ; ölçeklene bilir vektörel yazı tipi , w3 komisyonu tarafından oluşturulmuş resim ve metin için kullanılan xml tabanlı vektörel grafik formatıdır.
.woff (Web Open Font Format) uzantılı dosya türü ; OpenType ve TrueType’ın sıkıştırılmış halidir %40’a kadar daha az yer kaplar.

Font türlerine göre tarayıcı desteği

Tarayıcılar
eot(Embedded OpenType)	–	–	8+	–	–	–	–
.ttf (TrueType Font)	31+	7+	–	31+	29+	8.3+	40+
.otf (Open Type Font)	31+	7+	–	31+	29+	7.1+	4.1+
.svg (Scalable Vector Grafik)	30+	3+	–	–	9+	+	+
.woff (Web Open Font Format)	35+	3+	9+	35+	10.1+	4.3+	2.2+
.woff2	36+	–	–	35+	+	–	37+

Yazı tiplerini dönüştürme araçları

Dosya türlerini birlerine dönüştürmek için internet ortamı üzerinde online olarak gerçekleştirebileceğiniz bir çok web sitesi mevcut, bunlardan en kullanışlı olanlarını sizlerle paylaşmak istedik.

.ttf dosya türündeki yazı tiplerini eot,woff,woff2,svg yapılarını dönüştürmek için
http://www.fontsquirrel.com/tools/webfont-generator
Mac kullanıcıları için application olarak geliştirilmiş güzel bir masa üstü uygulamsı olan FontPrep uygulaması, uygulama açık kaynak koldu olup xcode üzerinde değişiklik yapmakta mümkün, kullanımı son derece basit olan bu uygulama ile convert etmek istediğiniz dosya ya da dosyaları sürükleyip içine atıp dönüştür demeniz yeterli olacaktır. Kullanımla ilgili sıkıntı yaşayan arkadaşlar bizimle iletişime geçebilirler. Dosyayı indirdikten sonra applications klasörüne kopylamayı unutmayın.
https://github.com/briangonzalez/fontprep/tree/build
http://onlinefontconverter.com/

@font-face CSS Kullanımı




@font-face {
    font-family: 'inconsolata-boldbold';
    src: url('inconsolata-bold-webfont.eot');
    src: url('inconsolata-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('inconsolata-bold-webfont.woff2') format('woff2'),
         url('inconsolata-bold-webfont.woff') format('woff'),
         url('inconsolata-bold-webfont.ttf') format('truetype'),
         url('inconsolata-bold-webfont.svg#inconsolata-boldbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {

font-family: 'inconsolata-boldbold';

src: url('inconsolata-bold-webfont.eot');

src: url('inconsolata-bold-webfont.eot?#iefix') format('embedded-opentype'),

url('inconsolata-bold-webfont.woff2') format('woff2'),

url('inconsolata-bold-webfont.woff') format('woff'),

url('inconsolata-bold-webfont.ttf') format('truetype'),

url('inconsolata-bold-webfont.svg#inconsolata-boldbold') format('svg');

font-weight: normal;

font-style: normal;

}

Css ile Özel Font Kullanımı @font-face

Font dosyası uzantıları

Font türlerine göre tarayıcı desteği

Yazı tiplerini dönüştürme araçları

@font-face CSS Kullanımı

Yorum yap