Font Web CSS
Aturan CSS @font-face
Font web memungkinkan desainer Web untuk menggunakan font yang tidak diinstal pada komputer pengguna.
Ketika Anda telah menemukan/membeli font yang ingin Anda gunakan, cukup sertakan file font di server web Anda, dan itu akan secara otomatis diunduh ke pengguna saat dibutuhkan.
Font "milik" Anda ditentukan dalam @font-face
aturan CSS.
Format Font Berbeda
Font TrueType (TTF)
TrueType adalah standar font yang dikembangkan pada akhir 1980-an, oleh Apple dan Microsoft. TrueType adalah format font paling umum untuk sistem operasi Mac OS dan Microsoft Windows.
Font Tipe Terbuka (OTF)
OpenType adalah format untuk font komputer yang dapat diskalakan. Itu dibangun di atas TrueType, dan merupakan merek dagang terdaftar dari Microsoft. Font OpenType digunakan secara umum saat ini di platform komputer utama.
Format Font Terbuka Web (WOFF)
WOFF adalah format font untuk digunakan di halaman web. Ini dikembangkan pada tahun 2009, dan sekarang menjadi Rekomendasi W3C. 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.
Format Font Terbuka Web (WOFF 2.0)
Font TrueType/OpenType yang memberikan kompresi lebih baik daripada WOFF 1.0.
Font/Bentuk SVG
Font SVG memungkinkan SVG untuk digunakan sebagai mesin terbang saat menampilkan teks. Spesifikasi SVG 1.1 mendefinisikan modul font yang memungkinkan pembuatan font dalam dokumen SVG. Anda juga dapat menerapkan CSS ke dokumen SVG, dan aturan @font-face dapat diterapkan ke teks dalam dokumen SVG.
Font OpenType Tertanam (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 | |||||
---|---|---|---|---|---|
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 diatur ke "dapat diinstal".
Menggunakan Font yang Anda Inginkan
Dalam @font-face
aturan; pertama-tama tentukan nama untuk font (mis. myFirstFont) dan kemudian arahkan ke file font.
Tip: Selalu gunakan huruf kecil untuk URL font. Huruf besar dapat memberikan hasil yang tidak terduga di IE.
Untuk menggunakan font untuk elemen HTML, lihat nama font (myFirstFont) melalui font-family
properti:
Contoh
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Menggunakan Teks Tebal
Anda harus menambahkan @font-face
aturan lain yang berisi deskriptor untuk 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 berisi karakter tebal untuk font Sansation.
Peramban akan menggunakan ini setiap kali sepotong teks dengan font-family "myFirstFont" harus dicetak tebal.
Dengan cara ini Anda dapat memiliki banyak @font-face
aturan untuk font yang sama.
Deskriptor Font CSS
Tabel berikut mencantumkan semua deskriptor font yang dapat ditentukan di dalam @font-face
aturan:
Descriptor | Values | Description |
---|---|---|
font-family | name | Required. Defines a name for the font |
src | URL | Required. Defines the URL of the font file |
font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default is "normal" |
font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is "normal" |
font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is "normal" |
unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |