Bildiğiniz gibi Türk Lirası simgesini bilgisayarınızda kullanmak için http://www.tcmb.gov.tr/yeni/iletisimgm/TLSimge/kurulum.html adresinden kurulum programını indirerek bilgisayarımıza kuruyoruz. Bu program bilgisayarımıza AbakuTLSymSansRegular isimli bir font kuruyor. Ayrıca TL simgesi için bir klavye kısayolu ekliyor. (AltGr+T)

Peki ya web sitemizdeki para birimlerini nasıl yeni TL simgesi şeklinde göstereceğiz? İşte bu yazımızda bu konudan bahsedeceğim.

Öncelikle kurulum programının bilgisayarımıza yüklediği fontu alarak Font-Face yöntemiyle betiğimize dahil ediyoruz. Bunun için css dosyamızın en başına şu kod bloğunu yazmamız gerekiyor.

Source code

@font-face {
    font-family: 'TLFont';
    src: url('font/abakutlsymsans-regular-webfont.eot');
    src: url('font/abakutlsymsans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/abakutlsymsans-regular-webfont.woff') format('woff'),
         url('font/abakutlsymsans-regular-webfont.ttf') format('truetype'),
         url('font/abakutlsymsans-regular-webfont.svgz#AbakuTLSymSansRegular') format('svg'),
         url('font/abakutlsymsans-regular-webfont.svg#AbakuTLSymSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Bu kodu stil dosyamıza ekledikten sonra hemen Türk Lirası simgesi için kullandığımız HTML elemente atanmak üzere bir class belirleyerek font tipini TLFont olarak belirliyoruz. Yani css dosyamıza şöyle bir kod ekliyoruz:

Source code

.parabirimi {font-family:'TLFont';}

Daha sonra şuradan indireceğimiz dosyayı açarak içindeki font dosyalarını FTP üzerinden hosting alanımıza yüklüyoruz. (css içinde belirttiğimiz font url’leri ile fontları yüklediğiniz dizinin aynı olduğundan emin olunuz)

İşlem bu kadar. Şu anda sistemimiz TL fontları kullanmak için hazır. Kullanımı ise şöyle olacak.

Source code

<span class="parabirimi">¨</span> 123.00

Burada TL simgesi kullanacağımız yerlerde “¨” karakterini kullandığımızı görüyorsunuz. Eğer kullandığınız bilgisayarda TCMB’nin TL Simge Kurulum programını kurmuşsanız AltGr+T tuş kombinasyonu ile bu karakteri ekrana basabilirsiniz. Kurulu değilse burada kullanılan haliyle kopyala/yapıştır yaparak kullanmanız da mümkün.

Kolay gelsin