Mybb Hakkında Soru ve Sorunlarız, Yardım ve Destek için MybbDepo external Adresini Ziyaret Ediniz.
Sponsor Reklam

duyuru Güncel Duyurular!
Güncel MyBB Dökümanları.. Güncel + Orijinal MyBB Sürümleri..
bilgi mybb

Konuyu Oyla:
  • Derecelendirme: 5/5 - 1 oy
  • 1
  • 2
  • 3
  • 4
  • 5

Derecelendirme: 5/5 - 1 oy
[Bilgi] @ Font-Face ile Sitenize İstediğiniz Font'u Yükleyin !
#1
Bilgi 
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 makale Fatih Hayrioğlu'na aittir.

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

61995144168916424407.gif

Ş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/generator

ttf yazı tiplerini eot’ya çevirmek için çevirim içi araç:
Kod:
http://www.kirsle.net/wizards/ttf2eot.cgi

Farklı yazı tiplerini birbirine çeviren çevirim içi araç:
Kod:
http://onlinefontconverter.com/
ttf’den eot ye çeviren başka bir çevirim içi araç
Kod:
http://ttf2eot.sebastiankippe.com/
ttf’den svg’ye çevirme aracı:
Kod:
http://xmlgraphics.apache.org/batik/tools/font-converter.html


@font-face Kodu Nasıl Kullanılır ?

Burada devreye ben giriyorum. süper
Ş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.

süper 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...

Ara
Cevapla



Konuyu Okuyanlar: 1 Ziyaretçi

istanbul escorts - şişli escort - seks hikaye - porno - escort bayan

© 2009-2024 MyBB.Com.TR Internet Hizmetleri, MyBBGrup.Com Alt Kuruluşudur.

Web sitemiz dahilindeki tüm sayfalar, bu sayfaları gösteren tüm ekranlar ve içerdiği her türlü bilgi ve bağlı materyal, yerleşim ve öğeler, (çözüm ortaklarının logoları ve yasal hakları hariç) MyBB.Com.TR'ye aittir.
Yazılı izin olmaksızın ve kaynak belirtilmedikçe, (Kaynak göstererek alıntı yapılabilir.) kopyalanamaz ya da yayınlanamaz. MyBB.Com.TR sitesindeki içerik-ler 5070 sayılı kanun kapsamında dijital zaman damgasıyla ve DMCA tarafından korunmaktadır.
Tüm hakları, (insafiyet ile) saklıdır.



teknoloji forumu , haber

sex hikaye - porno izle - türk ifşa istanbul escort