
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
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ı
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
@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; } |
Minimal Coding Privacy Policy
Sitemizi ziyaret eden kullanıcılar aşağıdaki koşulları, yazılanlarla sınırlı olmamak şartıyla kabul etmiş sayılacaktır. “www.minimalcoding.net” sitesinde yer alan tüm bilgiler,tasarım,logo,yorum ve tavsiyeler ile ses, görüntü, yazı içeren bilgi ve belgeler (“İçerik”) ile buradan yapılan tüm linkler, kullanıcıya genel bilgi vermek amacıyla sunulmuştur.
Burada mevcut olan İçerik, Minimal Coding'i Kaynak göstermeden paylaşılamaz ve yayınlanamaz. Bu siteye erişim serbest ve anonimdir.