‘font-face’ etiketi için sonuçlar

CSS3 Yazı Tipi Özellikleri

Kasım 16th, 2011 • CSS
Etiketler: , , , ,

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

Haziran 9th, 2010 • 10 yorum CSS, Web Standartları
Etiketler: , , , , ,

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. 

Okumaya devam edin »

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

Nisan 29th, 2010 • 5 yorum CSS, Web Standartları, XHTML
Etiketler: , , , , , , ,

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. Okumaya devam edin »

Firefox 3.6 çıktı

Ocak 22nd, 2010 • 14 yorum Haberler
Etiketler: , , , , , ,

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ı

Ekim 29th, 2009 • 46 yorum CSS, XHTML
Etiketler: , , ,

@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.

fontface_destek_tablosu

Kaynak: Vikipedia

Okumaya devam edin »

Firefox 3.1 Yenilikleri

Ekim 21st, 2008 • 8 yorum CSS, Haberler, Javascript, Web Standartları, XHTML
Etiketler: , , , , , , , ,

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. Okumaya devam edin »

Kategoriler

Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.