The @font-faceAturan memungkinkan font kustom yang akan dimuat di halaman web. Setelah ditambahkan ke stylesheet, aturan tersebut menginstruksikan browser untuk mengunduh font dari tempatnya di-host, lalu menampilkannya seperti yang ditentukan di CSS.
Tanpa aturan, desain kami terbatas pada font yang sudah dimuat di komputer pengguna, yang bervariasi tergantung pada sistem yang digunakan. Berikut adalah rincian bagus dari font sistem yang ada.
Dukungan Browser Terdalam
Ini adalah metode dengan dukungan sedalam mungkin saat ini. The @font-faceAturan harus ditambahkan ke stylesheet sebelum gaya apapun.
@font-face ( font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ )Kemudian gunakan untuk mendesain elemen seperti ini:
body ( font-family: 'MyWebFont', Fallback, sans-serif; )Tingkat Praktis Dukungan Browser
Hal-hal berubah drastis menuju WOFF dan WOFF 2, jadi kita mungkin bisa lolos dengan:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); )| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| 5+ | 5.1+ | 3.6+ | 11,50+ | 9+ | 4.4+ | 5.1+ |
Dukungan Browser yang Sedikit Lebih Dalam
Jika Anda membutuhkan semacam media bahagia antara dukungan penuh dan dukungan praktis, ini akan mencakup beberapa basis lagi:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'); )| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| 3.5+ | 3+ | 3.5+ | 10.1+ | 9+ | 2.2+ | 4.3+ |
Dukungan Browser Super Progresif
Jika kita mempertaruhkan pertanian pada WOFF, maka kita dapat mengharapkan hal-hal bergeser ke arah WOFF2 di beberapa titik waktu. Itu berarti kita bisa hidup di ujung tanduk dengan:
@font-face ( font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'); )| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| 36+ | Tidak | 35+ dengan bendera | 23+ | Tidak | 37 | Tidak |
Teknik Alternatif
@import
Meskipun @font-facesangat bagus untuk font yang dihosting di server kami sendiri, mungkin ada situasi di mana solusi font yang dihosting lebih baik. Google Fonts menawarkan ini sebagai cara untuk menggunakan font mereka. Berikut ini adalah contoh penggunaan @importuntuk memuat font Open Sans dari Google Fonts:
@import url(//fonts.googleapis.com/css?family=Open+Sans);Kemudian kita bisa menggunakannya untuk menata elemen:
body ( font-family: 'Open Sans', sans-serif; )Jika Anda membuka URL untuk font tersebut, Anda sebenarnya dapat melihat semua @font-facepekerjaan yang dilakukan di balik layar.
Manfaat menggunakan layanan yang dihosting adalah kemungkinan akan menyertakan semua variasi file font, yang memastikan kompatibilitas lintas-browser yang mendalam tanpa harus menghosting semua file itu sendiri.
Lihat Pena Menggunakan @import untuk font khusus oleh CSS-Tricks (@ css-trick) di CodePen.
membuat lembar gaya
Demikian pula, Anda dapat menautkan ke aset yang sama seperti yang Anda lakukan pada file CSS lainnya, di dokumen HTML, bukan di CSS. Menggunakan contoh yang sama dari Google Fonts, inilah yang akan kami gunakan:
Kemudian, kita dapat mengatur gaya elemen kita seperti metode lainnya:
body ( font-family: 'Open Sans', sans-serif; )Sekali lagi, ini mengimpor @font-faceaturan tetapi, alih-alih memasukkannya ke stylesheet kita, aturan tersebut ditambahkan ke HTML kita .
Lihat Pen Menggunakan untuk font khusus oleh CSS-Tricks (@ css-trick) di CodePen.
Ini tentang hal yang sama… kedua teknik mengunduh aset yang dibutuhkan.
Memahami Jenis File Font
Cuplikan asli di bagian atas posting ini merujuk pada banyak file dengan ekstensi aneh. Mari kita bahas masing-masing dan dapatkan pemahaman yang lebih baik tentang apa artinya.
WOFF / WOFF2
Singkatan dari: Web Open Font Format.
Dibuat untuk digunakan di web, dan dikembangkan oleh Mozilla bersama dengan organisasi lain, font WOFF sering dimuat lebih cepat daripada format lain karena menggunakan versi terkompresi dari struktur yang digunakan oleh font OpenType (OTF) dan TrueType (TTF). Format ini juga dapat menyertakan metadata dan info lisensi di dalam file font. Format ini tampaknya menjadi pemenang dan tujuan semua browser.
WOFF2 adalah generasi berikutnya dari WOFF dan menawarkan kompresi yang lebih baik daripada aslinya.
SVG / SVGZ
Singkatan dari: Scalable Vector Graphics (Font)
SVG adalah pembuatan ulang font dalam bentuk vektor, yang membuatnya jauh lebih ringan dalam ukuran file, dan juga membuatnya ideal untuk penggunaan seluler. Format ini adalah satu-satunya yang diizinkan oleh Safari versi 4.1 dan di bawahnya untuk iOS. Font SVG saat ini tidak didukung oleh Firefox, IE atau IE Mobile. Firefox telah menunda implementasi tanpa batas waktu untuk fokus pada WOFF.
SVGZ adalah SVG versi zip.
EOT
Singkatan dari: Embedded Open Type.
Format ini dibuat oleh Microsoft (inovator asli @font-face) dan merupakan standar file berpemilik yang hanya didukung oleh IE. Faktanya, ini adalah satu-satunya format yang akan dikenali IE8 dan di bawahnya saat digunakan @font-face.
OTF / TTF
Singkatan dari: OpenType Font dan TrueType Font.
Format WOFF awalnya dibuat sebagai reaksi terhadap OTF dan TTF, sebagian, karena format ini dapat dengan mudah (dan ilegal) disalin, Namun, OpenType memiliki kemampuan yang mungkin diminati oleh banyak desainer (pengikat dan semacamnya).
Catatan tentang Performa
Font web bagus untuk desain, tetapi penting juga untuk memahami dampaknya pada kinerja web. Font kustom sering kali menyebabkan situs mengalami penurunan performa karena font tersebut harus diunduh sebelum ditampilkan.
Gejala umum biasanya adalah momen singkat saat font dimuat pertama kali sebagai fallback, lalu berkedip ke font yang didownload. Paul Irish memiliki postingan lama tentang ini (dijuluki "FOUT": Flash Of Unstyled Text).
Saat ini, browser biasanya menyembunyikan teks sebelum font kustom dimuat secara default. Lebih baik atau lebih buruk? Kamu putuskan. Anda dapat menggunakan kendali atas hal ini melalui berbagai teknik. Sedikit di luar ruang lingkup untuk artikel ini, tetapi inilah trifecta artikel oleh Zach Leatherman untuk membantu Anda memulai lubang kelinci:
- Lebih baik @ font-face dengan Font Load Events
- Bagaimana kami menggunakan font web secara bertanggung jawab, atau, menghindari @ font-face-palm
- Flash of Faux Text-masih banyak lagi tentang Font Loading
Berikut beberapa pertimbangan lainnya saat menerapkan font kustom:
Perhatikan ukuran file
Font bisa sangat berat, jadi pilihlah opsi yang menawarkan versi yang lebih ringan. Misalnya, pilih set font yang 50KB versus yang beratnya 400KB.
Batasi kumpulan karakter, jika memungkinkan
Apakah Anda benar-benar membutuhkan bobot tebal dan hitam untuk satu font? Membatasi set font Anda untuk memuat hanya apa yang digunakan adalah ide yang bagus dan ada beberapa tip bagus untuk itu di sini.
Pertimbangkan font sistem untuk layar kecil
Banyak perangkat terjebak pada koneksi yang buruk. Salah satu triknya mungkin menargetkan layar yang lebih besar saat memuat font khusus menggunakan @media.
Dalam contoh ini, layar yang lebih kecil dari 1000 piksel akan disajikan sebagai font sistem dan layar selebar ke atas akan disajikan dengan font khusus.
@media (min-width: 1000px) ( body ( font-family: 'FontName', Fallback, sans-serif; ) )Layanan Font
Ada sejumlah layanan yang akan menghosting font dan juga menyediakan akses ke font berlisensi komersial. Manfaat menggunakan layanan sering kali bermuara pada memiliki banyak pilihan font legal yang dikirimkan secara efisien (mis. Menyajikannya pada CDN yang cepat).
Berikut ini beberapa layanan font yang dihosting:
- Tipografi Awan
- Typekit
- Fontdeck
- Jenis web
- Fontspring
- Typotheque
- Fonts.com
- Google Fonts
- Font Squirrel
Bagaimana dengan Font Ikon?
Memang benar, @ font-face dapat memuat file font yang penuh dengan ikon yang dapat digunakan untuk sistem ikon. Namun, saya pikir Anda jauh lebih baik menggunakan SVG sebagai sistem ikon. Berikut perbandingan kedua metode tersebut.
Sumber Daya Lainnya
- Dasar-dasar Google Font API
- Keluarga Font CSS