font- face artık tüm tarayıcılarda
Eğer web tasarımı ile uğraşıyorsanız @font-face tanımlamaları ile istediğiniz fontları sitenizde kullanmanın olağan olduğunu biliyorsunuzdur. OTF ve TTF gibi değişik uzantılı fontları birçok tarayıcıda sorunsuz olarak gösterebiliyorsunuz. Fakat iş bu fontları Internet Explorer’da kullanmaya gelince malesef tahmin edeceğiniz gibi yine bir sorunla karşı karşıya kalıyoruz.
@font-face desteği aslında Internet Explorer 4’ten beri Microsoft’un desteklediği bir deklerasyon. Fakat bu destekleri biraz tutucu. Çünkü IE serisi sadece EOT (Embedded Open Type) fotmatlı fontları desteklemekte. Bu formatın seçilmesinin nedeni ise bu formatlı font dosyalarının kopyalanarak kişisel kullanıma izin vermemesidir.
Bu yazıda sevdiğiniz fontları nasıl EOT formatına çevireceğinizi ve sitelerinizde nasıl kullanacağınız konusunda ipuçlarını kullanarak sitelerimizin albenisini arttıracağız.
Birinci Adım: Ücretsiz bir font seçin
Internet’te birçok ücretsiz font sunan site var. Lisans problemleri ile karşılaşmak istemiyorsanız tamamen ücretsiz lisansla yüklenmeye sunulan fontları bularak sitelerinizde kullanmaya bakın. Bu tarz fontların sıralandığı fontex.org mutlaka göz atılması gereken kaynaklardan.
İkinci adım: Yazı tipi dönüşümü
Kendinize en uygun fontu seçtiniz ve lisans konusunda da probleminiz yoksa, artık elinizdeki yazı tipi dosyasını birçok tarayıcı tarafından desteklenecek formatlara çevirme zamanınız geldi. Font Squirrel @font-face Kit Generator servisi oldukça başarılı ve ihtiyaçlarımıza en iyi cevap veren site. Bu program TTF ya da OTF formatındaki fontlarınızı EOT, SVG ve WOFF formatındaki fontlara çeviriyor. SVG formatı bir vektör grafik standardı olmasının yanında içine aktarılan fontlar ile de Opera, iPhone ve Google Chrome için font-face desteği sağlıyor.
Üçüncü Adım: CSS’e giriş!
Evet artık tüm tarayıcılar için @font-face desteği sağlamak için elimizde her türlü ekipman mevcut. Artık CSS kodlarımızı yazabilir ve fontlarımızı kullanmaya başlayabiliriz. İlk olarak gerekli @font-face deklerasyonu. (bu tanımlamayı kit generator içinde gelen stylesheet.css dosyasında da bulabilirsiniz.)
@font-face { font-family: 'CuprumFFU Regular'; src: url('Cuprum.eot'); src: local('CuprumFFU Regular'), local('CuprumFFU'),
url('Cuprum.svg#CuprumFFU') format('svg'),
url('Cuprum.otf') format('opentype');
}
Bu tanımlamayı yaptıktan sonra örnek olarak h1 etiketinde fontumuzu kullanalım.
h1 { font-family: 'CuprumFFU Regular', Helvetica, Arial, sans-serif;
}
Sonuç: Daha iyi bir görünüm
Sitelerinizdeki yazıların göze hitap etmesini istiyorsanız,EOT ve SVG destekli font-face’i mutlaka kullanmalısınız.
@font-face desteği aslında Internet Explorer 4’ten beri Microsoft’un desteklediği bir deklerasyon. Fakat bu destekleri biraz tutucu. Çünkü IE serisi sadece EOT (Embedded Open Type) fotmatlı fontları desteklemekte. Bu formatın seçilmesinin nedeni ise bu formatlı font dosyalarının kopyalanarak kişisel kullanıma izin vermemesidir.
Bu yazıda sevdiğiniz fontları nasıl EOT formatına çevireceğinizi ve sitelerinizde nasıl kullanacağınız konusunda ipuçlarını kullanarak sitelerimizin albenisini arttıracağız.
Birinci Adım: Ücretsiz bir font seçin
Internet’te birçok ücretsiz font sunan site var. Lisans problemleri ile karşılaşmak istemiyorsanız tamamen ücretsiz lisansla yüklenmeye sunulan fontları bularak sitelerinizde kullanmaya bakın. Bu tarz fontların sıralandığı fontex.org mutlaka göz atılması gereken kaynaklardan.
İkinci adım: Yazı tipi dönüşümü
Kendinize en uygun fontu seçtiniz ve lisans konusunda da probleminiz yoksa, artık elinizdeki yazı tipi dosyasını birçok tarayıcı tarafından desteklenecek formatlara çevirme zamanınız geldi. Font Squirrel @font-face Kit Generator servisi oldukça başarılı ve ihtiyaçlarımıza en iyi cevap veren site. Bu program TTF ya da OTF formatındaki fontlarınızı EOT, SVG ve WOFF formatındaki fontlara çeviriyor. SVG formatı bir vektör grafik standardı olmasının yanında içine aktarılan fontlar ile de Opera, iPhone ve Google Chrome için font-face desteği sağlıyor.
Üçüncü Adım: CSS’e giriş!
Evet artık tüm tarayıcılar için @font-face desteği sağlamak için elimizde her türlü ekipman mevcut. Artık CSS kodlarımızı yazabilir ve fontlarımızı kullanmaya başlayabiliriz. İlk olarak gerekli @font-face deklerasyonu. (bu tanımlamayı kit generator içinde gelen stylesheet.css dosyasında da bulabilirsiniz.)
@font-face { font-family: 'CuprumFFU Regular'; src: url('Cuprum.eot'); src: local('CuprumFFU Regular'), local('CuprumFFU'),
url('Cuprum.svg#CuprumFFU') format('svg'),
url('Cuprum.otf') format('opentype');
}
Bu tanımlamayı yaptıktan sonra örnek olarak h1 etiketinde fontumuzu kullanalım.
h1 { font-family: 'CuprumFFU Regular', Helvetica, Arial, sans-serif;
}
Sonuç: Daha iyi bir görünüm
Sitelerinizdeki yazıların göze hitap etmesini istiyorsanız,EOT ve SVG destekli font-face’i mutlaka kullanmalısınız.
Yorumlar
Yorum Gönder