Zaman dulu
sebelum ada CSS3, para web designer jika ingin menampilkan font yang
keren-keren maka mereka harus menampilkan tulisan tersebut sebagai file
gambar, karena font yang keren tersebut belum tentu ada di komputer client
atau user.
Tapi sekarang kita bisa menentukan jenis font sesuka hati kita di web
dengan bantuan CSS3. Cara kerjanya, font tersebut kita upload ke hosting
atau server kita, kemudian dengan kode CSS3 @font-face kita bisa
mendefinisikan nama font family kita dan sumber file fontnya. Contoh tulisan
di bawah
Tulisan ini menggunakan font: Legion_Slab.ttf
Hai apa kabar, selamat datang di website codingwear,
Di sini kita akan belajar bersama mengenai CSS, Javascript, PHP
Kode CSS3 untuk menentukan jenis font
Mari kita lihat kode CSS3 untuk contoh di atas
<style>
@font-face
{
font-family: fontsaya;
src: url('dokumen/Legion_Slab.ttf');
}
#konten
{
font-family: fontsaya;
font-size: 15pt;
}
</style><divid="konten">
Tulisan ini menggunakan font: Legion_Slab.ttf<br>
Hai apa kabar, selamat datang di website codingwear,<br>
Di sini kita akan belajar bersama mengenai CSS, Javascript, PHP
</div>
Pada properti @font-face , pertama kita definisikan nama font family kita,
misalnya saya kasih nama fontsaya, nama font family ini sesuka hati kita.
Setalah itu kita definisikan sumber filenya, jika anda mengupload file font di
server yang berbeda, kita bisa menulisnya menjadi seperti: src:
url('http://www.desrizal.com/css3/Legion_Slab.ttf').
Setelah kita definisikan nama font family dan sumber file font-nya di
@font-face. saatnya kita atur elemen website kita, seperti kode CSS biasa
menggunakan font-family.
Dari : 170p3'x (15:50 05 Nov 2011) Web : http://klikedukasi.com keren nih mas, bisa pake jenis font apapun ya..mantap
#2
Dari : Fuad indra setiawan (13:57 09 Nov 2011) Web : http://fuadsetiawan.blogspot.com ini bs dipake di browser apa aja mas...
#3
Dari : Desrizal (17:05 09 Nov 2011) Web : http://blog.codingwear.com Browser yang support CSS3
#4
Dari : moke (12:55 13 Nov 2011) Web : http://studentsite-softskill.blogspot.com di internet explorer ga support T.T
#5
Dari : endipiran (15:04 22 Nov 2011) Web : http://endipiran.tobipuken.com/disabilitas-dan-pandangan-masyarakat.html browser apa saja mas yang support, makasih infonya lho and ditunggu jawabanya
#6
Dari : SPOTLINE (06:16 24 Nov 2011) Web : http://www.spotline.us manteb nih :)
#7
Dari : Desrizal (18:04 25 Nov 2011) Web : http://blog.codingwear.com @font-face browser yg support IE8+, FF4+, Chrome 4+, Safari 3+ dan Opera 10+.
Untuk IE, extension file font diganti .eot, contoh: Sansation_Light.eot
#8
Dari : tupic (15:39 02 Dec 2011) Web : http://www.pinter.in kereen
#9
Dari : Taufik Nurrohman (14:09 08 Dec 2011) Web : http://hompimpaalaihumgambreng.blogspot.com/ Haduh... yang susah itu ngeupload flie Fontnya. Untuk pemakai layanan blog gratisan seperti Saya, Saya lebih suka pake Google Web Fonts.
#10
Dari : inf (21:11 16 Dec 2011) Web : http://ifanapriana09.student.ipb.ac.id wah bagus juga yah, trus baca komennya juga bisa di pake dlm browser apa aja..
saatnya mempelajari css 3 ^o^
#11
Dari : tarihoran (18:22 23 Jan 2012) Web : http://www.budiarianto.com klo dibrowser yang ga support css3 tampilannya jadi seperti apa bang?
#12
Dari : Mas Jamal (18:53 14 Mar 2012) Web : http://masjamal.com Wah kalau ditaruh dihosting malah bengkak bandwidth mas. Pake google font aja deh...
#13
Dari : Ronnie Aban (21:02 23 Mar 2012) Web : http://jakartakita.com bagus sekali ada situs tutorial seperti ini. Membantu developer newbie untuk berkembang.
#14
Dari : nanda (14:54 11 Apr 2012) Web : http://jayateknikebel.com makasih tutorialnya mas.
bermanfaat banget...
siip..
#15
Dari : juna (23:11 06 Jun 2012) Web : - makasih banget masbro..semoga berkah..aamin
#16
Dari : Jordan Shoes For Sale (08:12 29 Jun 2012) Web : http://www.jordanretroshoesforsale2013.com ting malah bengkak bandwidth mas. Pake google font aja deh...
#17
Dari : cauza (08:14 10 Aug 2012) Web : http://cauza.web.id keren kak.. mantap. Ditunggu tuturial lainnya
#18
Dari : coupons (14:29 15 Aug 2012) Web : http://coupons-a.com/coupons/ Good day
Creative ideas turn out to be quite qualified in terms of you're posting. I wish you best of luck with your articles.
#19
Dari : bathroom tiles designs (15:51 25 Aug 2012) Web : http://bathroom-a.com/bathroom/ Hi
This is really a thought provoking write up for the content writers. Proceed posting such wonderful articles!
Subscribe in a reader
