Css'de Turk Lirasi Ile Ilgili Font Ayarlari
- Sevdanur GENC
- Mar 25, 2012
- 2 min read
Bu makalemizde web tasariminda sikca kullandigimiz style sheet yani Css dosyalarimiza ekleyebillecegimiz Yeni Turk Lirasi simgesinin font ayarlarini projemize nasil ekleyebilecegimiz, ekledikten sonra da css kodlarini html uzerinde nasil kullanacagimiz, ve Turk Lirasi simgesinin para biriminin ister saginda ister solunda nasil kullanabilecegimizden bahsedicem.
Oncelikle projemize Yeni Turk Lirasinin simgesinin bulundugu font dosyasi olan abakutlsymsans isimli dosyayi bu linkten indirip, projenize ekleyiniz.
Hemen ardindan projenize yeni bir Html ekleyiniz. Eklediginiz Html dosyasi ile indirmis oldugunuz font dosyalarinin ayni klasor icerisinde bulunmasina dikkat ediniz. Css kodlarimizi <head> taglari arasina <style> taglari olusturuyoruz ve gerekli font dosyasina ulasimini sagliyoruz. Hemen ardindan da <body> taglari arasinda yazmis oldugumuz css'i <div> taglari ile cagirip font gorunumunu saglamis oluyoruz. Olayi bu sekilde ozetledikten sonra dilerseniz kod kismina gecelim ve kodlarin isleyis asamalarina bir goz atalim. Oncelikle bahsettigimiz gibi Head taglari arasinda Style taglarimizi belirleriz. <head> <style type="text/css" media="screen, print"> <style ></head> Hemen ardindan Style kodlari arasinda indirmis oldugunuz abakutlsymsans font dosyalari ile ilgili kodlari style taglari icerisine gomelim. @font-face { font-family: 'AbakuTLSymSansRegular'; src: url('abakutlsymsans.eot'); src: url('abakutlsymsans.eot?#iefix') format('opentype'), url('abakutlsymsans.woff') format('woff'), url('abakutlsymsans.ttf') format('truetype'), url('abakutlsymsans.svg#AbakuTLSymSansRegular') format('svg'); font-weight: normal; font-style: normal; }
Eger ki indirmis oldugunuz font dosyalarinda .svg uzantili dosyayi inceleyecek olursaniz; Tl simgesi ile ilgili font ayarlarini gormus olacaksiniz. .ttf uzantili dosyada da simgenin kullanisi ve gorunumu bulunmaktadir. Tum bunlarla ilgili bilgileri cekebilmek icin ise url komudunu kullanarak oncelikle .eot dosyasini kullanarak dosyayi aciyor verileri cekiyor ve sisteme ayarlari gomuyoruz. Peki style dosyasina bu ayarlari gomdukten sonra body taglari icerisinde kullanacagimiz div taglari ile bu simgeyi nasil cagiracagiz. div:after{ font-family: "AbakuTLSymSansRegular", serif; font-size:24px; content:"t"; padding-right:9px; } Goruldugu gibi, kullandigimiz font dosyasini tipi ve boyutlari ile birlikte cagirdik. Tabi bununla birlikte kullanacagimiz t harifimizide content e deger olarak atadik. Div'den sonraki after ile, kullanilacak font un normal yazi tiplerinden sonra kullanilmasi yani normal yazi tipinin sag tarafina kullanilmasi seklindedir. Eger ki before degerini verecek olursaniz TL simgesini para biriminin on kismina yazmis olursunuz. Simdi yapmamiz gereken islem ise bunu body taglari arasinda cagiriyor olmamizdir. <body><div>250,<sup>00</sup></div></body>Div' de After ile kullaniminda ki ekran goruntusu ;
Div'de Before ile kullaniminda ki ekran goruntusu ;
Goruldugu gibi birkac kucuk islemle artik sizde projelerinizde yeni TL Simgesini kullanabilirsiniz...
Keyifli Calismalar Dilerim...
TurkLirasi.htm Kodlari ;
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css" media="screen, print"> @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; } div:before{ font-family: "AbakuTLSymSansRegular", serif; font-size:24px; content:"t"; padding-right:9px; } </style> <title>Turk Lirasi Gosterimi</title> </head> <body> <div>250,<sup>00</sup></div> </body> </html>
Comments