@font-face yardımı ile yeni TL sembolü eklemek

Yeni yayınlanan Türk Lirasınıda font-face yardımı ile ekleyebiliriz. TC Merkez bankasının yayınladığı yazı tipi olan AbakuTLSymSansRegular siteye ekleyerek kolay bir şekilde yeni Türk Lirası sembolünü web sitelerimize ekleyebiliriz.

Yazı tipinde sadece tl sembolünü kullanacağımız için diğer karakterleri silip sadece ikonu bırakarak yazı tipi dosya boyutunu küçültebiliriz.

https://www.box.com/s/2f69366c1d00ebd85208

Bağlantısından küçük dosyayı indirebilirsiniz.

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

Şeklinde sayfaya ekledik. Sembol olunca rakamların başına konuyor. araya biraz da mesafe koyalım.(padding-right:5px bunun için)

p:before{
    font-family: "AbakuTLSymSansRegular", serif;
    font-size:24px;
    content:"t";
    padding-right:5px;
}

ile sayfamıza ekledik.

Örnek: http://www.fatihhayrioglu.com/fontface/tl_deneme.html

KAYNAK