Section Artikel
Aturan CSS @font-face
Font web memungkinkan kita untuk menggunakan font yang tidak diinstal di komputer kita.
Ketika kita telah menemukan / membeli font yang ingin kita gunakan, cukup masukkan file font di server web dan itu akan secara otomatis diunduh ke komputer kita saat dibutuhkan.
Font “own” kita ditentukan dalam aturan CSS @font-face
.
Format Font yang Berbeda
Font TrueType (TTF)
TrueType adalah standar font yang dikembangkan pada akhir 1980-an, oleh Apple dan Microsoft. TrueType adalah format font yang paling umum untuk sistem operasi Mac OS dan Microsoft Windows.
OpenType Fonts (OTF)
OpenType adalah format untuk font komputer yang dapat diskalakan.Font tersebut dibangun di atas TrueType dan merupakan merek dagang terdaftar dari Microsoft. Font OpenType digunakan secara umum saat ini di platform komputer utama.
The Web Open Font Format (WOFF)
WOFF adalah format font untuk digunakan di halaman web. Font ini dikembangkan pada tahun 2009. WOFF pada dasarnya adalah OpenType atau TrueType dengan kompresi dan metadata tambahan. Tujuannya adalah untuk mendukung distribusi font dari server ke klien melalui jaringan dengan batasan bandwidth.
The Web Open Font Format (WOFF 2.0)
Font TrueType / OpenType yang memberikan kompresi lebih baik daripada WOFF 1.0.
SVG Fonts/Shapes
Font SVG memungkinkan SVG digunakan sebagai mesin terbang saat menampilkan teks. Spesifikasi SVG 1.1 menentukan modul font yang memungkinkan pembuatan font dalam dokumen SVG. Kita bisa menerapkan CSS ke dokumen SVG dan aturan @font-face dapat diterapkan ke teks dalam dokumen SVG.
Embedded OpenType Fonts (EOT)
Font EOT adalah bentuk kompak dari font OpenType yang dirancang oleh Microsoft untuk digunakan sebagai font yang disematkan pada halaman web.
Dukungan Browser untuk Format Font
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung format font.
Font format | Microsoft Edge | Google Chrome | Mozila Firefox | Safari | Opera |
---|---|---|---|---|---|
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 | Not supported | Not supported | Not supported | 3.2 | Not supported |
EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
*IE: Format font hanya berfungsi jika disetel ke “dapat diinstal”.
Menggunakan Font yang diinginkan
Dalam aturan @font-face, pertama tentukan nama untuk font tersebut (misalnya myFirstFont) dan kemudian arahkan ke file font.
Tip: Selalu gunakan huruf kecil untuk URL font. Huruf besar dapat memberikan hasil yang tidak diharapkan di IE.
Untuk menggunakan font untuk elemen HTML, lihat nama font (myFirstFont) melalui properti font-family:
Contoh :
<!DOCTYPE html> <html> <head> <style> @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } * { font-family: myFirstFont; } </style> </head> <body> <h1>The @font-face Rule</h1> <div> With CSS, websites can use fonts other than the pre-selected "web-safe" fonts. </div> <p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule.</p> </body> </html>
Menggunakan Teks Tebal
Kita bisa menambahkan aturan @font-face
lain yang berisi deskriptor untuk teks tebal:
Contoh :
<!DOCTYPE html> <html> <head> <style> @font-face { font-family: myFirstFont; src: url(sansation_light.woff); } @font-face { font-family: myFirstFont; src: url(sansation_bold.woff); font-weight: bold; } * { font-family: myFirstFont; } </style> </head> <body> <h1>The @font-face Rule</h1> <div> With CSS, websites can use <b>fonts other than the pre-selected "web-safe" fonts</b>. </div> <p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule.</p> </body> </html>
File “sansation_bold.woff” adalah file font lain, yang berisi karakter tebal untuk font Sansation.
Browser akan menggunakan ini setiap kali bagian teks dengan font-family “myFirstFont” harus dirender menjadi tebal.
Dengan cara ini kita bisa memiliki banyak aturan @font-face
untuk font yang sama.
Deskriptor Font CSS
Tabel berikut mencantumkan semua deskriptor font yang bisa ditentukan di dalam aturan @font-face
:
Descriptor | Nllai | Deskripsi |
---|---|---|
font-family | name | Required. Mendefinisikan nama untuk font |
src | URL | Required. Mendefinisikan URL dari file font |
font-stretch | normal kental sangat kental ekstra kental semi-kental diperluas setengah diperluas ekstra-diperluas sangat diperluas | Optional. Mendefinisikan bagaimana font harus direntangkan. Default-nya adalah “normal” |
font-style | normal italic oblique | Optional. Mendefinisikan bagaimana font harus ditata. Default-nya adalah “normal” |
font-weight | normal bold 100 200 300 400 500 600 700 800 900 | Optional. Mendefinisikan ketebalan font. Default-nya adalah “normal” |
unicode-range | unicode-range | Optional. Mendefinisikan kisaran karakter UNICODE yang didukung font. Defaultnya adalah “U + 0-10FFFF” |