Fatih Hayrioğlu'nun not defteri » font-face

CSS3 Yazı Tipi Özellikleri

fatih.hayrioglu — Wed, 16 Nov 2011 21:33:15 +0000

Yazı tipi özellikleri her ne kadar CSS2.1 standartlarında olsada tipografik birçok ihtiyacı karşılamadığı zamanla görüldü. En büyük sorun kullanıcının bilgisayarında olmayan yazı tiplerini kullandığımızda bu yazı tiplerini resim olarak kullanmak zorunda olmamızdı veyahut sIFR veya cufon gibi çözümler üretilse dahi bunlar yan yol ile çözüm üretmektir. Bu sorunu @font-face özelliği ile büyük ölçüde halleden CSS standartları bunu dışında diğer sorunlarıda görüp CSS3 ile birlikte çözüme kavuşturmaya çalışıyor.

Burada sizlere bu özellikleri anlatmaya çalışacağım.

@font-face

Bu konuyda daha önce derinlemesine değinmiştim. @font-face kullanımı bağlantısından detaylı bilgi alabilirsiniz. Bu özelliği diğerlerine göre avantajı mevcut tüm tarayıcılar tarafından desteklenmesidir.

font-size-adjust

font-size-adjusting özelliği yazı tipinin x-yüksekliği değerini orantılı olarak ayarlamamızı sağlar. x-yüksekliği değeri; aşağıdaki görselde de görüldüğü gibi küçük x harfinin yüksekliğini gösterir.

Bu özellik farklı platformlar için kod yazarken çok önem kazanacaktır. Tasarımınız eğer belli sınırları var ise ve farklı işletim sistemlerinde aynı görüntüyü elde etmek istiyorsanız yükseklik için aynı oranı yakalamamıza yaracak güzel bir özellik.

Bir örnek verecek olursak; Verdana, Arial ve Trebuchet MS uyguladığımız 3 aynı metinin sonucu aşağıdaki gibi olacaktır.

Arial uyguladığımız 2. kolon ve Trebuchet Ms uyguladığımız 3. kolon aynı yüksekliğe sahipken ilk kolondaki verdana uyguladığımız metin yüksekliği daha yüksektir. Aynı yüksekiği yakalamak için

  .kolon1{
    font:12px/18px Verdana, Geneva, sans-serif;
    font-size-adjust:0.47;
  }

aynı yüksekliği yakalamamızı sağlayacaktır.

Bu özelliği daha iyi anlamak için http://brunildo.org sitesindeki örnek çok güzel.

Örneği görmek için tıklayınız.

font-stretch

font-stretch özelliği CSS2 ile birlikte gelip CSS2.1 ile birlikte kalkan özelliklerden biridir. CSS3 ile birlikte tekrar standartlara girmeye çalışıyor. Henüz hiç bir tarayıcı desteklemiyor.

font-stretch özelliği metinlerin geniş veya dar olmasını ayarlar.

Aldığı değerler;

normal
Yazı tipinin normal boyutlara getirir

semi-condensed, condensed, extra-condensed, ultra-condensed
Metni belirlene ölçülerde daraltır. Yarı, ekstra, normal ve ultra

semi-expanded, expanded, extra-expanded, ultra-expanded
Metni belirlene ölçülerde genişletir. Yarı, ekstra, normal ve ultra

wider, narrower CSS3’de bu değerler önerilmiyor
Göreceli değerlerdir. Kapsayıcı elemana göre göreceli olarak değer alır. wider değeri alan eleman kapsayıcısından daha geniş olurken, narrower değeri alan eleman kapsayıcısından daha dar olur.

font-effect

Metinlere oymacılık efektlerini vermek için kullanabileceğimiz bir özellik. CSS3 standartların eklenen bu özellik sayesinde biz kabartma, oyma ve dış hat çizgisi uygulayabiliriz. Kullanma için pek mantıklı gelmedi bana ama zaman vermek gerekiyor biraz.

font-smooth

Yazı tipi uygulamalarında yumuşatma işlemi çok önemlidir. Ancak bu sistemi işletim sistemleri ele aldığı için biz kod yazarları için işin bu tarafı için ancak bir iki çakma yöntem uygulamak kalıyordu. Bu özellik şimdilik pek etkili olmasada ilerisi için bir ümit benim için. Her bilgisayar Mac olsa yada PC’ler daha iyi yazı tipi tarasa font-face’in en büyük eksikliği ortadan kalkacaktır.

Gelecekle ümitle bakmak için bu özelliği daha etkin olması lazım.

font-emphasize

Asya kökenli yazı tipleri için kullanılabilecek bir özellik. Zamanla daha detaylı inceleriz. Lazım oldukça incelemek gereken bir özellik.

Sonuç

Tipografi çok detaylı bir mecra zamanla daha güzel sonuçlar alacağımızı düşünsemde şimdilik çok başarılı olduğunu söyleyemem. CSS3 ile Yazı tipi özellikleri arasında en önemlisi font-face özelliği bence, hala belli sorunları olsada tüm tarayıcıların destekliyor olması çok büyük bir katkıdır.

İleride her şey daha güzel olacak.

Kalın sağlıcakla

Kaynaklar

Web’de Yazı Tipi Sorunları ve Google Font API

fatih.hayrioglu — Wed, 09 Jun 2010 20:20:28 +0000

Web sitelerini oluşturan öğelerden en önemlisi muhakkak yazılardır. Resimler ve videolarda önemli olsa da çoğunlukla yazılar ön plandadır web sitelerinde. CSS kod yazanlar için diğer öğelere göre daha erişebilir ve esnektir yazılar. Yapılan yenilikler bu konuda daha avantajlı duruma geliyoruz.

Daha önce yazı tipi hakkında bir çok makale yazmıştım.

Yazı Tipi özellikleri
CSS’de Metin Özellikleri
CSS ve Tipografi
Metin Yerine Resim/Flash Ekleme Teknikleri (Image Replacement)
@font-face kullanımı
CSS ile metinlere gölge vermek
vd. metin ile ilgili makaleler

Yukarıda görüldüğü gibi yazı tipi ve web sitelerinin tipografisi ile alakalı bir çok konuyu ele aldık. Peki yeterli mi? hayır bence henüz yeterli değil. Henüz tam olarak yeterli değil. Hala bazı sorunlar mevcut bu konuda.

Biz web sitelerimizde yazı tiplerini kullanırken genel kullanıcı bilgisayarındaki yazı tiplerini kullanmak zorunda idik. Eğer kullanıcının bilgisayarında olmayan bir yazı tipi kullanılmış ise tasarımda bu yazıyı çeşitli yöntemler kullanarak sitemize ekliyorduk ve hala ekliyoruz. Bu yöntemler yukarıda linkinide verdiğim Metin Yerine Resim/Flash ekleme teknikleri yazısında anlattım. Bu şekilde yapılan çözümlerin anlamlı kod yazma, esnek kodlama, erişebilirlik vd. yönlerden sakıncalarıda olsa diğer yöntemlere göre daha avantajlıdır.

Daha sonra web geliştiricileri ve standart oluşturucular bu konudaki sorunları gidermek için @font-face kullanımını çıkardılar. Bu yöntem ile web sitesinde her türlü yazı tipi kullanabiliyoruz, tabi bunun için ilk önce yazı tipimizi kullanıcının bilgisayarına yüklüyoruz ve sonra sitemizde istediğimiz yerde bu yazı tipini kullanabiliyoruz. Bu yöntemide @font-face kullanımı adlı yazımda açıkladım.

Gelelim sorunlara;

Lisans Sorunu

İlk sorun yazı tipi geliştiricilerinden geldi, her ne kadar ülkemizde pek ses getirmesede dünyada genel olarak lisans hakkı sorunu çıktı. Bu sorun üzerinde çalışmalar yapılıyor, çeşitli topluluklar konu üzerinde çalışıyor. Bazı gelişmeler olsada kesin bir çözün bulunabilmiş değil.

Yazı Tipi Uzantılarında Standartlaşamama Sorunu

@font-face yazımda belirttiğim gibi neredeyse her tarayıcının kendine özgü bir yazı tipi mevcut, ve diğerlerini desteklemiyor.

Ancak son zamanlarda bu konuda da büyük bir gelişme oldu. En büyük ayak diretici Microsoft yeni çıkaracağı sürümde(ie9) woff desteğini getireceğini duyurdu ve woff grubu ile çalışmayı kabul etti. Diğer yazı tipi uzantılarından daha küçük boyutlara sahip olan woff gelecek için ümit veriyor. Bu konuda gelecek ümit verici.

Yazı Tipi Kenarlarını Yumuşatamama Sorunu

Tasarımcıların kullandığı grafik geliştirme araçlarındaki(Phoshop, Fireworks vd.) yazı tiplerini daha estetik gösteren yazı tipi aliasing sorunu var. Aşağıdaki örnektede görüldüğü gibi @font-face ile uyguladığımız yazı tiplerinde bu sorun nedeni ile tam olarak sitelerimizde bu özelliği kullanamıyoruz.

Burada şöyle bir sorunda daha varki ClearType özelliği başlangıçta seçili olarak gelmeyen Windows Xp hala dünyada çok büyük bir yüzdeye sahip. Bu konuda Mac’ler gayet güzel sonuçlar verdiğinin söyleyebiliriz.

Bu konuda her ne kadar yenide olsa webkit’ten gelen güzel bir haber var. -webkit-font-smoothing özelliğini üzerinde çalışılıyor. Bu özellik eğer standartlaşırsa süper olacak. Sonuçları görmeden konuşmak için erken.

Yazı Tipi Yüklenme Sorunu

@font-face kullanımındaki bir diğer sorunumuzda yazı tipinin kullanıcının bilgisayarına yüklenmesinden kaynaklana sorunlar var. Eğer kullanıcının internet hızı yavaş ise içerikler yükleniyor ve sonra yazı tipi yüklendikten sonra siteye uygulanıyor. Buda site sahiplerinin istemediği bir durum. Konu hakkında farklı tarayıcılarda farklı sorunlarda var.

İşte bu noktada Google her zaman ki gibi web mecrasının geliştirmek ve hızlandırmak konusundaki çabaları kendini gösterdi ve Google Font API aracını bizlerin kullanımına sundu.

Peki bu araç ne işimize yarayacak? Bu araç sayesinde ortak bir yazı tipi havuzu oluşturulmuş olacak. Ayrıca bir çok site tarafından kullanılınca bu araç sizin kullandığınız yazı tipini daha önce bilgisayarına bir defa yüklemiş bir kullanıcı sizin sitenize geldiğinde yazı tipi uyarlaması daha hızlı çalışacaktır. Yani kullanıcının ön belleğinde tutulma yüzdesini arttırmış oluyoruz böylece. Yazı tipi bant genişliği sorunlarıda giderilmiş oluyor ayrıca.

Tabi burada da şöyle bir sorunumuz varki oda Google Font Apı’nin içerdiği yazı tiplerinde şimdilik Türkçe karakter yok. Ümit ediyoruz ki yakında eklenir ve bizlerde bu kaynaktan yararlanırız.

Sonuç

Her ne kadar burada yazdığım sorunlar şimdilik giderilmese de ilerisi için atılan adımlar olumlu yönde. Ümit ediyorum yakında metinlerimiz daha özgür olacaktır. Arayüz geliştiricilerinin eli daha da kuvvetlenecektir.

Kalın Sağlıcakla

Kaynaklar

İlk harfi büyük(drop caps) paragraflar oluşturmak

fatih.hayrioglu — Thu, 29 Apr 2010 21:40:29 +0000

Geçen gün Kadir Günay bana sormuştu bu konuyu benim aklımda da css ile bir çözümü olduğu ancak ie6 ile sorunu olduğu kalmıştı. Biraz araştırdım ie6 ile sorunu yok, var ama ufak tefek. Araştırmışken birde makale yazayım herkes yararlansın dedim.

İlk harfi büyük paragraflar oluşturma işi aslında dergilerde sık uygulanan bir yöntemdir. Genelde dergilerin başlangıç paragrafının ilk harfi 2 veya daha fazla satır yüksekliğinde oluşturarak farklı ve güzel bir görünüm kazandırırlar. Bu durumu biz css ile yapabiliyoruz.

Biz bu görüntüyü first-letter seçicisi ile elde edebiliyoruz. Hatta bu seçicinin adı drop caps-ilk harfi büyük harf seçicisi diyede geçiyor. Bizim için en büyük avantajı ie6 dahil tüm tarayıcıların bu özelliği desteklemesi.

:first-letter seçicisini tanımlanabilen özellikler listesi;

font özellikleri
color özellikleri
background özellikleri
text-decoration
vertical-align (float değeri none ise)
text-transform
line-height
margin özellikleri
padding özellikleri
border özellikleri
float
text-shadow
clear

İlk Denememiz

HTML kodlarımız

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

CSS kodlarımız

p{
    width:350px;
    background-color:#272722;
    padding:10px;
    color:#fff;
}

p.introduction:first-letter {
    font-size: 4.2em;
    float: left;
    line-height: 1em;
    margin: 0.13em 0.13em 0.13em 0;
}

Örneği görmek için tıklayınız.

Firefox’da yukarıdaki görüntüyü elde ederken

İnternet Explorer’da yukarıdaki gibi bir görüntü elde ederiz. Dikkat ederseniz bir explorerda L harfi yukarıya daha yakın.

Sorunu gidermek için line-height değerini 1em olarak atıyoruz. Farklı line-height değerleri ile padding uygulamalarında ie 6 ve 7′de sorun çıkıyor, line-height değerini 1 em’de tutmak mantık en azından ie için 1em yapmak gerekiyor.

Fark stillerde uygulamalar yapabiliriz.

İlk harfi font-face ile özel bir yazı tipi ile oluşturarak güzel bir görüntü elde edebiliriz. Yazı tipini(PaladinFLF) http://www.fontsquirrel.com/fontface sitesinden aldım.

@font-face {
	font-family: 'PaladinFLFRegular';
	src: url('PaladinFLF.eot');
	src: local('☺'), url('PaladinFLF.ttf') format('truetype'), url('PaladinFLF.svg#webfont') format('svg');
}

p{width:350px; background-color:#272722; padding:10px; color:#fff;}
p.introduction:first-letter {
	font: 4.2em/1em 'PaladinFLFRegular', Arial, sans-serif;
    float: left;
    margin: 0.13em 0.13em 0.13em 0;
}

Örneği görmek için tıklayınız.

İşe Biraz daha renk katalım

İlk harfin etrafına kenar çizgisi atayıp ardalan rengini değiştirelim.

@font-face {
	font-family: 'PaladinFLFRegular';
	src: url('PaladinFLF.eot');
	src: local('☺'), url('PaladinFLF.ttf') format('truetype'), url('PaladinFLF.svg#webfont') format('svg');
}

p{
	width:350px;
	background-color:#272722;
	padding:10px;
	color:#fff;
}

p.introduction:first-letter {
	font: 4.2em/0.6em 'PaladinFLFRegular', Arial, sans-serif;
    float: left;
    margin: 0.13em 0.13em 0 0;
	border:3px solid #fff;
	padding:0.13em;
	background-color:#F30;
	line-height:1em;
}

HTML kodları

Örneği görmek için tıklayınız.

Ardalan Resmi ile

Harfin ardalanına bir resim koyup üzerine harfi koymayı deniyorum.

  @font-face {
	font-family: 'PaladinFLFRegular';
	src: url('PaladinFLF.eot');
	src: local('☺'), url('PaladinFLF.ttf') format('truetype'), url('PaladinFLF.svg#webfont') format('svg');
}

p{
	width:350px;
	background-color:#272722;
	padding:10px;
	color:#fff;
}

p.introduction:first-letter {
	font: 4em/1em 'PaladinFLFRegular', Arial, sans-serif;
    float: left;
    margin: 0.13em 0.13em 0 0;
	padding:0.4em 0.5em 0.4em 0.3em ;
	background-color:#F30;
	background:url(t.jpg) 0 0 no-repeat;
	text-shadow:2px 2px 2px #999
}

Örneği görmek için tıklayınız.

Firefox ile yukarıdaki gibi güzel bir sonuç elde ediyoruz. Ancak İnternet Explorer’da sorun yaşıyoruz.

Bu duruma çözüm üretmek için bir kaç yol var. İlki resmi direk içeriğe ekleyip float:left ile sola yaslayarak çözmek

p{
	width:350px;
	background-color:#272722;
	padding:10px;
	color:#fff;
}

p.introduction img {
	float:left;
	margin-right:0.8em
}

HTML kodu

empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Velit esse cillum dolore eu fugiat nulla pariatur

Örneği görmek için tıklayınız.

Diğer bir yöntem bu harfi span içine alıp background olarak tanımlamaktır.

CSS3 ile ekstra kod kullanmadan

Sayfamızın ilk paragrafının ilk harfine uygulama yapıyoruz. first-child seçicisi bu imkanı bize sağlar. ancak bu özelliği ie < 9 desteklemiyor.

p:first-child:first-letter{
  font-size: 4.2em;  float: left;  line-height: 1em;  margin: 0.13em 0.13em 0.13em 0;
}

Kaynaklar

Firefox 3.6 çıktı

fatih.hayrioglu — Thu, 21 Jan 2010 22:11:03 +0000

Firefox 3.5 çıkalı daha 6 ay oldu, bazıları şunu diyebilir bu kadar kısa aralıklarla niye yeni sürüm çıkarıyorsunuz kardeşim. Bu tamamen İnternet tarayıcıları ile olan ilişkimize bağlı bir şey. Artık İnternetsiz bilgisayar çok yavan duruyor. Yani her şeyimiz İnternet. Bu durumu düşününce ve İnternete erişimimizi sağlayan araçlarında İnternet tarayıcıları olduğunu düşünürsek 6 ay normal bir süre bence. Elimizi güçlendiriyor bu güncellemeler.

Mozilla’nın en güzel yanlarında biriside bence bu. Belli aralıklarla çıkan sürümlerde bir çok sorunlar gideriliyor ve yeni özellikler ekleniyor. Bu İnternet kullanıcısına ve özellikle web sayfası geliştiricilerine çok büyük avantajlar sağlıyor. Eğer aynı yöntemi Microsoft’da uygulasa idi biz ie6 gibi bir garabet ile uğraşmıyor olacaktık. Belki bu kadar rekabet olmayacaktı ama bizde yenilikleri daha hızlı uygulayacaktık. Neyse yine ie6 ile uğraşmayalım.

Firefox 3.6 çıktı. Buradan indirebilirsiniz.

Gelelim yeniliklere;

Dil Desteği: Bir çok dilde aynı anda çıktı, aralarında Türkçe’de var
Personas: Daha önce kullandığımız Personas(yani tarayıcı çerçevesini tasarlama aracı) daha kolay kullanıma sunulmuş. Tek tık ile tarayıcı çerçevesini değiştirebiliyoruz. Ben bu konuda Mozilla’nın daha cüretkar davranarak css kodu ile tarayıcı çerçevesini değiştirme yönünde bir çalışması olduğunu okumuştum, ama hala geliştirme aşamasında galiba. Ne güzel olurdu tüm tarayıcı görünümünü değiştirmek. Tasarımcılara biraz daha iş çıkardı.
Plugin Güncelleme: Daha etkin bir plugin güncelleme sistemi. Eski pluginlerin bir çok dezavantajını gören Firefox bu konuda daha güzel bir çözüm bulmuş ama ne kadar kullanılır bilemem.
Gelişmiş Video Desteği: Videolara tam ekran desteği ve HTML5 ile gelen poster frames desteği gelmiş. Şimdilik genel projelerimiz için pek bir şey ifade etmiyor.
Javascript Performansı: Javascript performansında hızlandırmaya gidilmiş. Ayrıntılı bilgi için tıklayınız.
Form Tamamlama: Formlardaki bezer alanlar için Firefox geçmişindekiler ile eşleşiyor ise otomatik tamamlıyor.
3. Parti Yazılım Desteği: Yeni sürüm ile birlikte 3. parti yazılımcıların Firefox entegrasyonu daha kolay olacağı söyleniyor.
WOFF Desteği: Daha önce font-face özelliğini anlatırken belirttiğim gibi WOFF font desteği geldi. Bu tip yazı tipi dosyları diğerlerinin yarısı kadar boyutları olduğunu belirterek bu kısmı kapatayım.
CSS: Yeni CSS özellik desteği gelmiş.
- Gradyen özelliği ilk olarak webkit geliştiricilerinin geliştirdiği bir özellikti, Firefox’da bu kervana katıldı, ama biz uygulayamıyacağız, çünkü ie desteklemiyor. İE’ye de javascript ile bir çözüm bularak kullanabiliriz. Doğrusal ve radyal granyen desteği geldi Firefox 3.6 ile. CSS web sitelerinin görselliğini tek başına ele alacak gibi.
- Çoklu background desteği geldi. CSS3 ile gelen bu özellik bence Firefox için gecikmiş bir destek ile geldi. Gerçi ie desteklemediği için şimdilik duracağız. Bu özelliği kullanımı ile neler yapabileceğimizi düşünmek bile yeter. Ah ulan Microsoft.
- Farklı medya tiplerinin desteği geldi. Ayrıntı için tıklayınız.
- Background genişletme özelliği geldi, CSS3 ile birlikte gelen bu özellik, Firefox3.6 ile destekleniyor. Flash ile yapılan %100 genişlik ve yükseklikteki sitelerde ardalana konulan sayfa backgroundunu artık css ile yapabileceğiz, ama şimdi değil. Ah ulan Microsoft
- pointer-events özelliği desteği gelmiş. Bu özelliği bende ilk defa görüyorum desem yalan olmaz. Buradaki örnek aydınlatıcı.
- ve bunun haricinde irili ufaklı özellikler gelmiş ve sorunlar giderilmiş.
HTML5 ve DOM Desteği: Yeni DOM ve HTML5 destekleri gelmiş. Drag&Drop API ve File API. Örnekleri görmek için videoyu izleyin.
Hız: İlk kurulumdan sonra daha hızlı olduğunu söyleyebilirim, ancak bunu kullandıkça göreceğiz. FireBug1.5 ve Firefox3.6 performansının daha iyi olduğunu kesin. Mozilla’nın iddiasına göre %20′lik bir hızlanma varmış.
Ortama Adapte Olmak: Yeni device API’si desteği ile artık desteği olan makinelerde Firefox duruma göre vazife çıkaracak ve görünümünü ayarlayacak. Nasıl olduğunu görmek için videoyu izleyin. Çoğunlukla Mac kullanıcılarının kullanacağı bir özellik gibi.

Birde yapımcılarından Mike Beltzner’dan dinleyelim

Kaynaklar

@font-face kullanımı

fatih.hayrioglu — Thu, 29 Oct 2009 17:15:30 +0000

@font-face Genel Bilgi

@font-face özelliği web sitelerimizde sistemde yüklü olmayan yazı tiplerini kullanma imkanı verir. @font-face kodu ile kullanıcının bilgisayarına kullanılacak yazı tipleri yüklenir. @font-face özelliği ilk olarak CSS2 ile birlikte geldi, ancak sonradan bazı problemlerden dolayı CSS2.1′de kaldırıldı ve şimdi CSS3 ile birlikte yeniden geldi.

Tipografi hakkında bir çok makale yazıldı ve yazılmaktadır. Bende zamanında CSS ve Tipografi adlı bir makale yayınlamıştım ve orada yazı tipi seçiminin öneminden bahsetmiştim. Biz halihazırda farklı yazı tiplerini sitelerimizde kullanmak için sIFR, Cufón vd. bazı yöntemleri kullanmaktayız. Bu yöntemler işimizi görse de bazı dezavantajları yok değildi. @font-face bu sorunları gidermek ve yenilikler getirmek için bizlere sunuldu. Bu konuda ümitliyim.

@font-face özelliğini tüm yeni nesil tarayıcılar destekliyor. Diğer özelliklerden farklı olarak ilk defa bu özelliği Firefox, Opera ve Safari sonradan destekledi. Şu an ki durumda kullanmak mümkün olsa da bence en az 4-5 aylık(Firefox’un eski sürümlerinin yerini Firefox 3.5 alması için) bir süre sonra tam anlamıyla bir projede kullanılabilir. Tabi tek sorunumuz bu ise.

Kaynak: Vikipedia

@font-face Yazı tipi Çeşitleri

@font-face kullanımında farklı tarayıcılar farklı yazı tipi dosya uzantılarını desteklediği için birden fazla yazı tipi dosyası hazırlamalıyız. İnternet Explorer .eot uzantılı yazı tiplerini desteklerken, diğer tarayıcılar .ttf ve .otf uzantılı yazı tiplerini desteklemektedir. Biz kullanacağımız yazı tiplerinin ie için .eot uzantılı ve diğerleri için .ttf veya .otf uzantılı dosyalarını hazırlamamız gerekecektir. Ayrıca Opera9 ve Google Chrome içinde .svg uzantılı dosya hazırlamalıyız.

@font-face kodu ile sayfalarımıza ekleyebileceğimiz yazı tipi çeşitlerini incelersek;

.eot Uzantılı dosyalar: .eot(Embedded OpenType) Microsfot’un baştan beri desteklediği yazı tipi dosya uzantısıdır. Diğer yazı tipi çeşitlerine destek vermeyi pek düşünmeyen İnternet Explorer bu konuda da ayak bağı olacağa benzer. WEFT aracı ile .ttf uzantılı dosyalarınızı .eot uzantılı dosyalara çevirebilirsiniz. Biraz karışık geldi bu program bana.
.ttf ve .otf uzantılı dosyalar: Genelde Windows işletim sistemininde kullandığı bu yazı tipi dosya çeşitlerini Firefox, Safari, Opera desteklemektedir.
.svg uzantılı yazı tipi dosyaları: Vektörel, esnek yapılı yazı tipi dosya çeşidi. Safari, Google Chrome, Opera destekliyor. FontForge sitesindeki SVG uzantılı oluşturulan Opera’da sorun oluyor. Batik bu araç var, ama nasıl kullanıldığını öğrenebilmiş değilim.
Önerim fontsquirrel.com sitesindeki aracı kullanmanız.
woff uzantılı yazı tipi dosyaları: Web için kullanılacak bir standart. Boyut olarak diğelerine nazaran %40′lara varan bir avantaj sağlıyor. Firefox 3.6 sonrasında destekleyeceğini açıkladı.

Yazı tip dosyalarını birbirine çevirme araçları

ttf yazı tipinizi font-face’in desteklediğin tüm yazı tiplerini(.eot, .svg, ttf, woff) üreten güzel bir araç: http://www.fontsquirrel.com/fontface/generator
ttf yazı tiplerini eot’ya çevirmek için çevirim içi araç: http://www.kirsle.net/wizards/ttf2eot.cgi
Farklı yazı tiplerini birbirine çeviren çevirim içi araç: http://onlinefontconverter.com/
ttf’den eot ye çeviren başka bir çevirim içi araç http://ttf2eot.sebastiankippe.com/
ttf’den svg’ye çevirme aracı: http://xmlgraphics.apache.org/batik/tools/font-converter.html

Bunların dışında bazı programlar varsa da bunlar yeterli araçlar bence.

Burada şunu söylemeden geçemeyeceğim, fontsquirrel.com sitesi farklı yazı tipi dosyaları üretmede çok yardımcı oldu. Bir çok site ve program farklı yazı tipi dosyaları üretirken Ethan’ın sitesi web’de kullanılacak tüm yazı tipi dosya uzantılarını üreterek bana çok yardımcı oldu. İlk kez fontsquirrel.com sitesindeki aracı kullandığımda .svg uzantılı dosyaların Opera’da kesik göründüğünü fark ettim. Sonra bu sorunu site sahibi ile paylaşmak istedi, sağ olsun Ethan ilgilendi ve aracı geliştirdi. Buradan Ethan’a tekrar teşekkürlerimi sunuyorum. Thanks, Ethan

@font-face Kodu

Evet yazı tipi dosyalarımız hazırsa kodumuzu yazmaya başlayabiliriz. @font-face kod yapısı

        @font-face {
        font-family: Gentium;
        src: url(http://site/fonts/Gentium.ttf);
        }

        p { font-family: Gentium, serif; }

Kod yapımız iki kısımdan oluşmaktadır. İlk başta özel yazı tipimizi sisteme yüklüyoruz. Sonra da bu yazı tipini kullanıyoruz.

Ancak durum bu kadar kolay değil. Buradan itibaren ie kendini gösteriyor ve farklı yazı tipi ile farklı kod yazmamız gerekiyor. Bundan başka bir kaç sorunuda gidermek için Paul Irish‘in yazdığı makaleden çıkardığımız kod:

@font-face {
    font-family: 'Graublau Web';
    src: url('GraublauWeb.eot');
    src: local('Graublau Web Regular'), local('Graublau Web'),
    url('GraublauWeb.woff') format('woff'),
    url('GraublauWeb.svg#GraublauWeb') format('svg'),
    url('GraublauWeb.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

p { font-family: "Graublau Web", serif; }

11 Kasım 2011 eklendi: font-weight: normal; font-style: normal; Chrome’un kalın ve normal anlama problemi nedeni ile eklendi.

Bu kodlamanın özel yazı tipini sisteme tanıtırken ilk olarak .eot uzantılı yazı tipini ekliyoruz ie için. Sonrasındaki satır ise diğer tarayıcılar için yazılan kod. Buradaki yereldeki (local) tanımı eğer bu yazı tipi kullanıcının bilgisayarında var ise yüklenmeden kullanılması için ve de sonraki kodu ie’den gizlemek içindir. Devamı kodlamada diğer tarayıcılar içindir.

Kendi Örneğimizi Yapalım

Hasan Yalçın’ın sitesinden Türkçe yazı tipi indiriyoruz. TR Centurion Old Italik.TTF yazı tipini seçtim, sonra http://www.fontsquirrel.com/fontface/generator sitesinden farklı yazı tiplerini ürettim. Şimdi elimde hem .ttf uzantılı hemde .eot uzantılı yazı tipim var.

.ttf ve .eot uzantılı dosyalarım hazırsa kodu yazmaya başlayabiliriz.

@font-face {
        font-family: 'TR Centurion Old  Italic';
        src: url('TR_Centurion_Old_Italik.eot');
        src: local('TR Centurion Old  Italic'), local('TRCenturionOldItalic'), url('TR_Centurion_Old_Italik.woff') format('woff'), url('TR_Centurion_Old_Italik.svg#TRCenturionOldItalic') format('svg'), url('TR_Centurion_Old_Italik.TTF') format('truetype');
}

Daha sonra bu yazı tipini sayfamızda kullanabiliriz.

h1{font:44px 'TR Centurion Old Italic', Arial, sans-serif; color:#1259C7;}
h3{font:24px 'TR Centurion Old Italic', Arial, sans-serif; color:#1259C7;}
p.ilkParagraf{font:16px/1.5em 'TR Centurion Old Italic', Arial, sans-serif;}

Örnek sayfayı görmek için tıklayınız. Yazı tipi özgürlüğüne hoş geldiniz.

@font-face Yükleme Zamanı

Kullanıcının bilgisayarına yükletilen yazı tipi dosyaları yüklü dosyalar olabiliyor. Sitede kullanılmayacak bazı yazı tipi karakterleri kaldırılabilir. Bazı TTF dosyaları 1Mb bulduğunu düşünürsek biraz yükleme zamanını düşünmek lazım. Yazı tipi dosyaları belli karakter setlerini içerir. Latin harfleri, Yunan harfleri, Para işaretleri vd. Bu karakter setlerinde kullanmadıklarımızı silip yazı tipi dosyasının boyutunu azaltabiliriz. Aynı şekilde tek tek karakterleride silebiliriz.

Yazı tipi dosyaların iki şekilde yorumlanıyor. İlk olarak Firefox’un yorumlaması; Sayfa genel yazı tipi ile açılıyor taki gömülen yazı tipi dosyası yüklenene kadar. Yazı tipi dosyası yüklenince asıl yazı tiplerini görüyoruz. İkinci yorum ise diğer tarayıcıların tercih ettiği yol. Bu yorumda yazı tipi dosyası yüklenene kadar kullanıcı bekliyor, yükleme tamamlanınca yazı görünüyor.

Bu nedenden dolayı font-face tanımını sayfamızın en üstüne koymalıyız. Script dosyalarımız varsa onları tanımlamamızdan sonraya koymalıyız.

Yazı tipi dosyalarımızı sıkıştırabiliyoruz. sunucumuz gzip’i destekliyorsa yazı tipi dosyalarımızı sıkıştırıp zaman kazanabiliriz. Ayrıntılı bilgi için tıklayınız.

Yazı tipi dosyaları ön belleğe alındığı için kullanıcının sonraki ziyaretlerinde daha az bekleme yapacaktır.

@font-face Sorunları

Örnek sayfamıza farklı tarayıcılarda baktığımızda her bir tarayıcının ufak tefek farklılıklarla sayfayı gösterdiğini göreceğiz. Ben yaptığım örneklerde yazı tipine göre değişiyor bazı yazı tiplerinde mükemmele yakın sonuç verirken bazılarında köşeleri yumuşatmadığı için kötü sonuçlar elde edebiliyoruz. Bizim kullandığımız yazı tipi(TR Centurion Old Italik) eğik olduğu için pek belirgin bir fark görünmüyor, gayetde hoş oldu.
En büyük sorunlarda biri hala ağırlıklı olarak kullanılan Windows XP’de ClearType seçeneğinin başlangıçta aktif olmamasıdır. Mac kullanıcılarının işletim sisteminin yazıları daha yumuşak kenarlı göstermesinden dolayı yazıları daha göze hoş şekilde göreceklerdir. Windows kullanıcılarının ClearType seçili durumda standarda nazaran daha iyi görüntüler elde edeceği aşikar, ancak Mac’e göre kıyaslarsak Mac bayağı bir fark atıyor PC’ye.
@font-face’in sifR vd. yöntemlere göre en büyük dezavantajı anti-aliasing özelliğinden yoksun olması. Ancak kullanılan yazı tiplerinin seçiminde eğer daha seçici olursak bu durumu halledebiliriz.
font-face kullanımındaki en büyük sorunlardan biriside kullanıcının bilgisayarına indirilebilen ve isteyenleri kolayca elde edebileceği yazı tipi dosyalarının lisans haklarının nasıl korunacağı konusundadır. CSS2.0 sonrası kaldırılmasının ana nedenlerinden biriside budur. Bazı çözümler üretilse de tam anlamıyla bir çözüm elde edilmiş değildir.
Firefox 3.5 ile font-face kullanımını desteklemeye başladı. Firefox farklı hostlardan yazı tipi kullanmaya izin vermiyor(Böyle bir durum için .htcaccess dosyasına bir ekleme yapmak gerekiyor). Ayrıca font-stretch, unicode-range ve SVG yazı tipi dosyalarını da desteklemiyor. Firefox 3.6 sürümünden sonrası için yeni yazı tipi gelişmelerini destekleyeceğini açıkladı.
Opera’da local() yazı tipi tanımlamasında tırnak kullanmayınca sorun yaşayabilirsiniz. Bu nedenle tanımlarda hep tek veya çift tırnak kullanmalıyız.
Ziyaretçinin bilgisayarındaki isim ile bizim yazı tipi ismi aynı değilse local() tanımı pek bi işe yaramayacaktır. Bu nedenle bildiğimiz tüm isimleri ard arda local() tanımı içinde yazarak bu sorunu aşabiliriz.
src: local("TR Centurion Old Italik"),
local(‘TRCenturionOldItalik‘),
local("Centurion Old Italik"),
local(‘CenturionOld‘),
url(../font/font.ttf) format(‘truetype’);
FontForge programı ve fontsquirrel.com sitesinde üretilen .svg dosyaları Opera’da içiçe görünüyor. Çözüm için Batik‘i öneriyorlar.
Bir çok ücretsiz yazı tipi indirebileceğimiz site var ve bir çoğu yabancı site. Burada şöyle bir sorun var, çoğu Türkçe karakter içermiyor. Bunun için bizim bu karakterleri eklememiz gerekiyor. Google’da şöyle bir arama yaptım "Font türkçeleştirme" bu işi anlata bir çok site var.
Firefox kullanıcıları ilk olarak yazı tipi gömülmemiş halini görürler, ne zaman yazı tipi yüklenirse o zaman özel yazı tipimizi görürler.

@font-face’in Geleceği ve Sonuç

Genel olarak küçük boyutlu fontlar güzel görünürken büyük boyutlu fontlarda iyi görüntü alamayabiliyoruz. Ayrıca kıvrımlı hatlara sahip yazı tiplerinde kenarlar daha pürüzlü görünüyor. Bence kullandığınız fontu Windows xp’de test etmeden yayına almayınız.

Tarayıcı kullanım oranlarını incelediğimizde %94′lik bir font-face destekleyen tarayıcı grubu var. 4-5 ay sonra bu oran 98 – 99 civarına gelecektir.

@font-face özelliğinin bu kadar geç desteklenmesindeki en büyük sebep elbetteki yazı tipi üretenlerin haklarının korunmasıdır.

@font-face kullanılan sayfalardaki sonuçlar zamanla daha iyi sonuçlar vereceğini düşünüyorum. İşletim sistemleri, tarayıcılar ve yazı tipi geliştiricileri zamanla bu özelliğin farkına varıp buna göre kendilerini geliştireceklerini düşünürsek zamanla daha iyi sonuçlar alacağımız kesin.

Yazı tipi özelinde Tipografi genelindeki bu konuda araştırdığımız ve öğrendiğimiz kadarını sizlerle paylaşmaya çalıştım, ancak konu çok geniş ve derin olduğu için bir çok yönden eksik kalmış olabilir. Bir kusurumuz aksaklığımız oldu ise affola.

Kaynaklar

Firefox 3.1 Yenilikleri

fatih.hayrioglu — Tue, 21 Oct 2008 08:50:05 +0000

Firefox 3.1 Beta1 çıktı. Aslında sadece bir haber değeri taşıyan bir bilgi, ancak Firefox 3.1 ile birlikte bir çok sevindirici gelişmeler getirdiği için dikkate değer bir yenileme. Bir ara sürüm değilde sanki yeni bir sürüm gibi. Yeni özelliklere bir göz atalım.

Geolocation

Geode internet tarayıcıları için yeni kavram. Mozilla laboratuarlarının geleceğin tarayıcıları hakkındaki düşüncelerinden biri idi bu. Kullanıcıların yerini belirleyip ona göre sayfalar ve içerikler sunmak . Örneğin yeni bir yere taşındınız ve en yakın yemek yyiyecek yeri veya marketi bulmak için internet tarayıcını size yardımcı olabilecek.

Firefox 3 ile eklenti yardımı ile gelen bu özelliği, isterseniz deneyebilirsiniz. Buradan indirip deneyebilirsiniz. Deneme yapmak için örnek bir siteye yönlendiriyor, ancak Türkiye’den kullananlar için hata veriyor. Türkiye’deki ip durumu düşünüldüğünde pek kullanışlı bir araç olmayacak. Ama ne diyelim gelecekten ümitliyiz.

Gizlilik konusuda düşünülerek kullanıcının verdiği kadar bilgi ile sonuçları gösteriyor. Üst barda çıkan bilgi ekranı yardımı ile yapılacak.

Firefox3.1 ile birlikte gelecek olan özellik Geode eklentisinden daha iyi olacağı W3C Geolocation specification standartlarını destekleyen bir yapı kullanılacağı belirtiliyor. Bu standardı javascript gibi düşünebiliriz.

İnternet tarayıcıları gittikçe kullanıcıya daha çok düşünen araçlar olmaya başlıyor. Son zamanlardaki rekabet en çok kullanıcıya yaradığı kesin.

http://www.informationweek.com/galleries/showImage.jhtml?galleryID=263&articleID=211201744 sitesinde 3-10 arasındaki resimler bize işleyişin nasıl olduğunu güzel bir şekilde gösteriyor.

@font-face ile yazı tipi desteği

Web kod yazarları ve tasarımcıların en büyük sorunlarından birisi işletim sistemin desteklediği başlangıçta yüklü yazı tipleri dışındaki yazı tiplerini web sitelerinde kullanamama sıkıntısıdır. Tam bir kullanamama diyemeyiz tabi kullanabiliyoruz ama başlangıçta yüklü olanlar gibi değil.

Firefox 3.1 ile birlikte gelen bu özellik desteği sayesinde farklı yazı tipleri kullanımında büyük bir adım daha atılmış oluyor. Gelecek ümit veriyor bize.

Mac ve Windows kullanıcıları için eklenen bu özelikle Linux için Firefox 3.1 kararlı sürümü ile birlikte gelecekmiş.

Beni en çok sevindiren özelliği bu oldu açıkçası.

@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}

Video ve Auido Desteği

HTML 5 ile birlikte gelen ve< auido> elemanı desteği Firefox 3.1 ile birlikte geliyor. Bu elemanlar sayesinde görüntülü ve işitsel öğeleri web sayfalarına eklemek daha basit olacak. Ayrıca Javascript ile bu nesneleri etkileşimli kullanabileceğiz.

Adres Çubuğunda Yenilikler

Adres çubuğunda özel karakterler ile arama sağlanarak sınırlarımızı belirlememiz sağlanmış. Yeni çıkan tarayıcılarda adres çubuğu artık çok fonksiyonlu hale getirilmeye başlandı. Firefox3.1 ile gelen özel arama karakterleri yardımı ile aramayı neredeyse tek adres çubuğuna taşımışlar diyebiliriz.

^ işareti ile geçmişte gezdiğimiz sayfalarda arama yapabiliyoruz.
* işareti ile favorimize eklediğimiz sitelerde arama yapabiliyoruz
+ işareti ile eklediğimiz etiketlerde arama yapabiliyoruz.
# işareti hem başlıkta hemde etiketde arama yapmak için kullanıyor.

Yeni Javascript Motoru – TraceMonkey

Yeni Javascript motoru ile Google Chrome’un tahtını elinden aldı. SunSpider JavaScript testinde bir numara. Google Chrome’un geliştirdiği Javascript motoru ile tarayıcılar Javascript motorlarını tekrar gözden geçirmek zorunda kaldı. Firefox yeni Javascript motoru ile hızını arttırdı. Rekabet kullanıcıya yarıyor.

TraceMonkey başlangıçta kapalı geliyor açmak için

1. Adres bara about:config yazın
2. Filter alanında javascript.options.jit.content girip üzerine iki kere tıklayıp false olan değeri true yapın
3. Tarayıcıyı açıp kapatın

XHR

XMLHttpRequest (XHR) API’si. Javascript ve diğer diller tarafından kullanılan bu API, sunucu ve istemci arasında XML ve diğer verilerin aktarılmasını sağlıyor. Bu API’nin Firefox 3.0 ile beraber gelmemesine sebep olarak, XHR’nin spesifikasyonlarının kesinleşmesi ve güvenlik modelinin iyileştirilmesi için biraz daha zamanın olmasıymış. Mozilla yeterli zamanın geçtiğine kanaat getirmiş ki 3.1 bu özelliği eklemiş.

Bu özelliklere ek olarak

Web Standartlarına daha uygun: Gecko düzen motorunu web standartlarına daha uygun hale getirilmiş. Acid 3 testinden 89 alarak mevcut tarayıcılar(Google Chrome, İnternet Explorer7 – 8 b2) arasındaki en iyi notu aldı.
CSS 2.1 ve CSS 3 özelliklerinin desteği eklenmiş
Daha önce eklenti ile yapılan sekmeler arası geçiş için ön izleme görünümü eklenmiş.
Adres bar da girdiğimiz kelimeleri filtreleme özelliği eklenmiş.

Kararlı Sürüm ile gelecek özellikler

Özel Mod

Google Chrome ve Internet Explorer 8 ile birlikte gelen özel mod özelliği Firefox 3.1 ile birlikte gelecek. Bu özellik sayesinde

Speed Dial

Speed Dial ile yeni açılan sekmede en sık kullanılan web sitelerini küçük resimleri ile birlikte listeleyebiliyoruz. Daha önce eklentiler ile kullandığımız bu özellik yeni sürüm ile birlikte geliyor.

Daha fazla yenilik

Bunun haricinde Firefox 3.1 ile birlikte bir çok kullanışlı özellikler getirilecek.