CSS @ aturan font-face
Contoh
Tentukan font bernama "myFirstFont", dan tentukan URL tempat font tersebut dapat ditemukan:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Dengan @font-face
aturan tersebut, desainer web tidak harus menggunakan salah satu font "web-safe" lagi.
Dalam @font-face
aturan Anda harus terlebih dahulu menentukan nama untuk font (misalnya myFirstFont), dan kemudian arahkan ke file font.
Untuk menggunakan font untuk elemen HTML, lihat nama font (myFirstFont) melalui properti font-family:
div
{
font-family: myFirstFont;
}
Dukungan Peramban
Aturan @font-face
ini didukung di Edge, Chrome, Firefox, Safari, dan Opera.
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 |
*Format font hanya berfungsi jika diatur ke "dapat diinstal".
Sintaksis
@font-face
{
font-properties
}
Font descriptor | Values | Description |
---|---|---|
font-family | name | Required. Defines the name of the font. |
src | URL | Required. Defines the URL(s) where the font should be downloaded from |
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 value is "normal" |
font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default value is "normal" |
font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default value is "normal" |
unicode-range | unicode-range | Optional. Defines the range of unicode characters the font supports. Default value is "U+0-10FFFF" |
Lebih Banyak Contoh
Contoh
Anda harus menambahkan aturan @font-face lain yang berisi deskriptor untuk teks tebal:
@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 aturan @font-face untuk font yang sama.
Halaman Terkait
Tutorial CSS: Font Web CSS