Web Fonts CSS3 - The @font-face Aturan
font web 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 di-download ke pengguna bila diperlukan.
Anda "sendiri" font didefinisikan dalam CSS3 @font-face aturan.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
| Milik | |||||
|---|---|---|---|---|---|
| @font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Berbeda Font Format
TrueType Font (TTF)
TrueType adalah font standar yang dikembangkan di akhir 1980-an, oleh Apple dan Microsoft. TrueType adalah font format yang paling umum untuk sistem operasi kedua Mac OS dan Microsoft Windows.
OpenType Font (OTF)
OpenType adalah format untuk font komputer scalable. Dibangun pada TrueType , dan adalah merek dagang terdaftar dari Microsoft. OpenType font yang digunakan umumnya hari ini pada 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 / Shapes
font SVG memungkinkan SVG untuk digunakan sebagai mesin terbang saat 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.
Tertanam OpenType Font (EOT)
Font EOT adalah bentuk kompak OpenType font yang dirancang oleh Microsoft untuk digunakan sebagai font tertanam pada halaman web.
Browser Dukungan untuk Font Format
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung format font.
| font format | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0 * | 4.0 | 3.5 | 3.1 | 10,0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | Tidak didukung | 36.0 | 35,0 * | Tidak didukung | 26,0 |
| SVG | Tidak didukung | 4.0 | Tidak didukung | 3.2 | 9.0 |
| EOT | 6.0 | Tidak didukung | Tidak didukung | Tidak didukung | Tidak didukung |
* IE: The font format hanya bekerja ketika diatur menjadi "diinstal".
* Firefox: Tidak didukung secara default, tetapi dapat diaktifkan (perlu menetapkan bendera untuk "benar" untuk menggunakan WOFF2).
Menggunakan Font Anda Ingin
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 elemen HTML, merujuk pada nama font ( myFirstFont ) melalui font-family properti:
Contoh
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Cobalah sendiri " Menggunakan Teks Bold
Anda harus menambahkan lagi @font-face berisi aturan penjelas untuk teks tebal:
Contoh
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Cobalah sendiri " File "sansation_bold.woff" adalah file font lain, yang berisi karakter berani untuk font Sansation.
Browser akan menggunakan ini setiap kali sepotong teks dengan font-family " myFirstFont " harus membuat sebagai tebal.
Dengan cara ini Anda dapat memiliki banyak @font-face aturan untuk font yang sama.
Uji Diri dengan Latihan!
CSS3 Font Deskriptor
Tabel berikut mencantumkan semua deskriptor font yang dapat didefinisikan dalam @font-face aturan:
| deskripsi | Nilai | Deskripsi |
|---|---|---|
| font-family | name | Wajib. Mendefinisikan nama untuk font |
| src | URL | Wajib. Mendefinisikan URL dari file font |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | Pilihan. Mendefinisikan bagaimana font harus meregang. Default adalah "normal" |
| font-style | normal italic oblique | Pilihan. Mendefinisikan bagaimana font harus ditata. Default adalah "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | Pilihan. Mendefinisikan keberanian font. Default adalah "normal" |
| unicode-range | unicode-range | Pilihan. Mendefinisikan berbagai karakter UNICODE font mendukung. Default adalah "U + 0-10FFFF" |