Dukungan jenis font yang dapat digunakan dalam sebuah situs (blog/web) sangat terbatas, sehingga muncul beragam pengembangan fasilitas yang memungkinkan kita menggunakan beragam jenis font yang kita inginkan, seperti Cufon, sIFR, dan sebagainya dengan bantuan javascript dan flash.
Tapi kini, CSS, mulai menggembangkan penggunaan beragam jenis font baik itu font "true type" maupun "open type" dengan @font-face, tanpa javascript dan flash, hanya menggunakan css dan file jenis font yang kita upload.
Penggunaan @font-face
Penggunaan @font-face, terutama untuk font jenis "opentype" belum didukung oleh semua browser, tetapi untuk font jenis "truetype" dapat dibaca dengan baik oleh IE dengan merubahnya dari "ttf" ke "eot".
Detil dari penggunaan @font-face, sebagai berikut:
<html>
<head>
<title>Web Font Sample</title>
<style type="text/css" media="screen, print">
@font-face {
font-family: "Diavlo";
src: url("tempat/font/Diavlo.otf") format("opentype");
}
@font-face {
font-family: "Anivers";
src: url("tempat/font/Anivers.otf") format("opentype");
}
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf") format("truetype");
}
h1, h2 { font-family: "Diavlo", serif }
h1, h2 { font-family: "Anivers", serif }
p { font-family: "Bitstream Vera Serif Bold", serif }
</style>
</head>
<body>
<h1>Ini penggunaan font Diavlo.</h1>
<h2>Ini penggunaan font Anivers.</h1>
<p>Ini penggunaan font Bitstream Vera Serif Bold.</p>
</body>
</html>
Saya mencoba @font-face ini, pada web Balawa Mitra Nusantra, dengan menggunakan font diavlo (opentype) yang hanya dapat dibaca pada browser Firefox dan Opera, sedangkan jika kita membuka web tersebut dengan IE saya menggunakan font (truetype) Fontin-Regular yang mesti terlebih dahulu dirubah menjadi "eot" di "ttf → eot" atau di TTF to EOT Font Converter.
Lebih lengkap penggunaan @font-face dan contohnya dapat pelajari di:
- beautiful fonts with @font-face
- CSS @ Ten: The Next Big Thing
- @font-face in IE: Making Web Fonts Work
- 21 Awesome @font-face Embeddable Typefaces
- @font-face and performance
Contoh sukses penerapan @font-face:
Becoming a Font Embedding Master
Generator:
Generator @font-face Mempermudah Custom Font
0 comments:
Posting Komentar