CSS3 Web Font - The @ Peraturan font-face
Web font memungkinkan desainer Web untuk menggunakan font yang tidak diinstal pada komputer pengguna.
Ketika Anda telah menemukan / membeli font yang ingin Anda gunakan, hanya menyertakan file font pada server web Anda, dan itu akan secara otomatis download ke pengguna bila diperlukan.
Anda "sendiri" font didefinisikan dalam CSS3 @ font-face aturan.
Berbeda Font Format
TrueType Fonts (TTF)
TrueType adalah font standar yang dikembangkan di akhir 1980-an, oleh Apple dan Microsoft. TrueType adalah format font yang paling umum untuk sistem operasi kedua Mac OS dan Microsoft Windows.
OpenType Fonts (OTF)
OpenType adalah format untuk font komputer scalable. Dibangun pada TrueType, dan adalah merek dari Microsoft. OpenType font yang digunakan umumnya hari ini di platform komputer besar.
Web Open Font Format (WOFF)
WOFF adalah format font untuk digunakan dalam halaman web. Ini dikembangkan pada tahun 2009, dan sekarang menjadi Rekomendasi W3C. WOFF dasarnya OpenType atau TrueType dengan kompresi dan metadata tambahan.Tujuannya adalah untuk mendukung distribusi font dari server ke klien melalui jaringan dengan keterbatasan bandwidth.
Web Open Font Format (WOFF 2.0)
TrueType / OpenType font yang menyediakan kompresi lebih baik dari WOFF 1.0.
SVG Font / Bentuk
Font SVG memungkinkan SVG untuk digunakan sebagai mesin terbang ketika menampilkan teks. SVG 1.1 spesifikasi mendefinisikan modul font yang memungkinkan penciptaan font dalam dokumen SVG. Anda juga dapat menerapkan CSS untuk dokumen SVG, dan @ font-face aturan dapat diterapkan untuk teks dalam dokumen SVG.
Embedded OpenType Fonts (EOT)
EOT font adalah bentuk kompak font OpenType dirancang oleh Microsoft untuk digunakan sebagai embedded font pada halaman web.
Menggunakan Font
Dalam CSS3 @ font-face aturan Anda harus terlebih dahulu menetapkan nama untuk font (misalnya myFirstFont), dan kemudian arahkan ke file font.
Tip: Selalu gunakan huruf kecil untuk URL font. Huruf besar dapat memberikan hasil yang tak terduga di IE.
Untuk menggunakan font untuk sebuah elemen HTML, merujuk pada nama font (myFirstFont) melalui properti font-family:
@font-face {
font-family: myFirstFont;
src: url(glyphicons-halflings-regular.woff);
}
.fontku {
font-family: myFirstFont;
}
Menggunakan Teks Bold
Anda harus menambahkan lagi @ font-face berisi aturan penjelas untuk teks tebal:
@font-face {
font-family: myFirstFont;
src: url(glyphicons-halflings-regular.woff);
font-weight: bold;
}
File "glyphicons-halflings-regular.woff" adalah file font yang lain, yang berisi karakter yang untuk font Sansation.
Browser akan menggunakan ini setiap kali sepotong teks dengan font-family "myFirstFont" harus dibaca sebagai huruf tebal.
Dengan cara ini Anda dapat memiliki banyak aturan @ font-face untuk font yang sama.
0 komentar:
Posting Komentar