+- MyBB Depo Forum (https://mybbdepo.com)
+-- Forum: Mybb Ders Deposu (https://mybbdepo.com/mybb-ders-deposu-forumu)
+--- Forum: Grafik & Tasarım Ders Deposu (https://mybbdepo.com/grafik-tasarim-ders-deposu-forumu)
+---- Forum: Tema Yapımı (https://mybbdepo.com/tema-yapimi-forumu)
+---- Konu Başlığı: [MCTR] @ Font-Face ile Sitenize İstediğiniz Font'u Yükleyin ! (/font-face-ile-sitenize-istediginiz-font-u-yukleyin-konusu.html)
@ Font-Face ile Sitenize İstediğiniz Font'u Yükleyin ! - W.E.D. - 17-03-2012
Uzun zamandır, bilgisayarda yüklü olmayan fontun çalıştırılmasını istiyordum. Diğer arkadaşların paylaşmış oldukları konularda sadece bilgisayarda yüklü olan fontlar kullanılabiliniyordu. Şimdi anlatacaklarımla, sitede kurulu olan font, herkeste düzgün bir biçimde görüntülenebilecek.
Bu makalenin büyük bölümü Fatih Hayrioğlu'na aittir. Teşekkürler...
@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.
@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.
Şimdi, @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ı tiplerini birbirine çevirmek için size bazı araçlar lâzım olacaktır:
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ç:
Kod:
http://www.fontsquirrel.com/fontface/generatorttf yazı tiplerini eot’ya çevirmek için çevirim içi araç:
Kod:
http://www.kirsle.net/wizards/ttf2eot.cgiFarklı yazı tiplerini birbirine çeviren çevirim içi araç:
Kod:
http://onlinefontconverter.com/Kod:
http://ttf2eot.sebastiankippe.com/Kod:
http://xmlgraphics.apache.org/batik/tools/font-converter.html@font-face Kodu Nasıl Kullanılır ?
Burada devreye ben giriyorum. :gozkirp:
Şimdi öncelikle kullanacağımız fontu seçiyoruz ve çeşitli formatlara çeviriyoruz. (Hemen yukarıda yazdığım gibi)
Sonra bu fontları sitemizde herhangi bir yere atıyoruz.
Admin Paneli > Temalar ve Şablonlar > Temalar > Temanız > global.css 'e girin.
Kod sayfasında en aşağı inin ve yeni bir satır oluşturup şu kodu oraya yapıştırın:
Örneğin Make Juice yazı tipini aldık.
Kod:
@font-face {
font-family: 'Make Juice';
src: url('makejuice.eot');
src: local('Make Juice'), local('MakeJuice'), url('makejuice.woff') format('woff'), url('makejuice.svg#MakeJuice') format('svg'), url('makejuice.TTF') format('truetype');
}Kendinize göre düzenlemeyi unutmayın !
Aslında bu işlemin kodları sadece şu kadar olmalı:
Kod:
@font-face {
font-family: Make Juice;
src: url(http://site/fonts/makejuice.ttf);
}
p { font-family: Make Juice, serif; }Fakat Internet Explorer, .ttf'i çalıştıramadığı için bu kod bu kadar uzuyor.
font-weight: normal; font-style: normal; kodları da Chrome'un eseri.
Peki Nasıl Kullanacağız ?
Konularda Yazı Tipi Olarak Kullanmak
Bu kısım için Relampago 'ya teşekkürler.
FTP'ye giriyoruz ana dizin/public_html/jscripts/editor.js ( editor.js Not Defteri İle Açıyoruz )
Buluyoruz;
Kod:
this.fonts["Verdana"] = "Verdana";Eklıyoruz;
Kod:
this.fonts["YAZI ÇEŞİDİNİ BURAYA YAZ"] = "YAZI ÇEŞİDİNİ BURAYA YAZ";Örnek:
Kod:
this.fonts["Comic Sans MS"] = "Comic Sans MS";İşlemin sonunda editor.js'yi FTP'mize geri atıyoruz.
:gozkirp: Editöre de Font'u yüklemiş olduk. Artık Editör'den seçip istediğiniz gibi kullanabilecek ve diğer üyelerin de görmesini sağlayabileceksiniz.
Fatih Hayrioğlu'ndan öneriler:
Alıntı: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.
Bu makale için:
- Fatih Hayrioğlu'na
- Relampego'ya
- Volkan Ege Dindar'a teşekkürler...
Kaynak: MCTR - @ Font-Face ile Sitenize İstediğiniz Font'u Yükleyin !