Font Web CSS
- Hal Sebelumnya Efek Teks CSS
- Hal Berikutnya Transformasi 2D CSS
Aturan @font-face CSS
Font Web memungkinkan desainer web menggunakan fonta yang belum terinstal di komputer pengguna.
Ketika Anda menemukan/membeli fonta yang ingin digunakan, cukup masukkan berkas fonta ke server web Anda, dan ia akan diunduh secara otomatis kepada pengguna saat diperlukan.
Font 'anda sendiri' dalam CSS @font-face didefinisikan dalam aturan.
Format fonta yang berbeda
Font TrueType (TTF)
TrueType adalah standar fonta yang dikembangkan oleh Apple dan Microsoft di akhir tahun 1980. TrueType adalah format fonta yang paling sering digunakan di sistem operasi Mac OS dan Microsoft Windows.
Font OpenType (OTF)
OpenType adalah format fonta komputer yang dapat diukur. Dibangun atas TrueType, dan adalah merek dagang Microsoft. Hari ini, fonta OpenType sudah digunakan secara luas di platform komputer utama.
Format Font Terbuka Web (WOFF)
WOFF adalah format fonta untuk halaman web. Dikembangkan pada tahun 2009, sekarang ini sudah menjadi standar recomended W3C. WOFF secara esensial adalah OpenType atau TrueType yang disempurnakan dengan pengompresi dan metadata lainnya. Tujuannya adalah untuk mendukung distribusi fonta dari server ke klien di jaringan dengan batas bandwith.
Format Font Terbuka Web (WOFF 2.0)
Font TrueType/OpenType menawarkan pengompresi yang lebih baik daripada WOFF 1.0.
Font/Shape SVG
Font SVG memungkinkan untuk menggunakan SVG sebagai bentuk tulisan saat menampilkan teks. Spesifikasi SVG 1.1 mendefinisikan modul fonta yang memungkinkan untuk membuat fonta di dokumen SVG. Anda juga dapat menerapkan CSS ke dokumen SVG, serta aturan @font-face dapat diterapkan ke teks dalam dokumen SVG.
Font OpenType Embedded (EOT)
Font EOT adalah bentuk tipis OpenType font yang dirancang oleh Microsoft, digunakan sebagai font yang disematkan di halaman web.
Dukungan browser untuk format font
Angka di tabel menandai versi pertama browser yang mendukung format font sepenuhnya.
| Format font | |||||
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| SVG | Tidak didukung | Tidak didukung | Tidak didukung | 3.2 | Tidak didukung |
| EOT | 6.0 | Tidak didukung | Tidak didukung | Tidak didukung | Tidak didukung |
*IE:Format font ini hanya efektif saat diatur menjadi "installable".
*Firefox:Secara standar tidak didukung, tetapi dapat diaktifkan (perlu mengatur tanda menjadi "true" untuk dapat menggunakan WOFF2).
Gunakan font yang Anda butuhkan
Dalam aturan @font-face: pertama-tama definsikan nama font (contoh myFirstFont), kemudian arahkan ke file font tersebut.
Petunjuk:URL font selalu menggunakan huruf kecil. Huruf besar mungkin akan menghasilkan hasil yang tak diharapkan di IE.
Untuk menggunakan font untuk elemen HTML, referensikan nama font melalui properti font-family (myFirstFont):
Contoh
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
Menggunakan teks tebal
Anda harus menambahkan aturan @font-face lain yang mengandung deskriptor teks tebal:
Contoh
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
File "sansation_bold.woff" adalah file font lain yang mengandung karakter tebal font Sansation.
Ketika sebuah paragraf teks dengan keluarga font "myFirstFont" harus ditampilkan dengan tebal, peramban akan menggunakannya.
Dengan cara ini, Anda dapat menetapkan banyak aturan untuk font yang sama. @font-face aturan.
CSS deskripsi font
Tabel di bawah menampilkan yang dapat digunakan dalam aturan @font-face Semua deskriptor font (font descriptor) yang didefinisi dalam aturan:
| deskriptor | nilai | deskripsi |
|---|---|---|
| font-family | name | diperlukan. Definisi nama font. |
| src | URL | diperlukan. Definisi URL file font. |
| font-stretch |
|
Pilihan. Menentukan bagaimana font harus diperpanjang. Nilai default adalah "normal". |
| font-style |
|
Pilihan. Menentukan gaya font. Nilai default adalah "normal". |
| font-weight |
|
Pilihan. Menentukan tebal font. Nilai default adalah "normal". |
| unicode-range | unicode-range | Pilihan. Menentukan rentang karakter UNICODE yang didukung font. Nilai default adalah "U+0-10FFFF". |
- Hal Sebelumnya Efek Teks CSS
- Hal Berikutnya Transformasi 2D CSS
