Hanya gunakan WOFF2, atau jika Anda membutuhkan dukungan sebelumnya, WOFF. Jangan gunakan format lain
( svgdan eotmerupakan format mati, ttfdan otfmerupakan font sistem lengkap, dan tidak boleh digunakan untuk keperluan web)
Singkatnya, font-face sudah sangat tua, tetapi hanya baru-baru ini telah didukung oleh lebih dari IE.
eot diperlukan untuk Penjelajah Internet yang lebih tua dari IE9 - mereka menemukan spec, tetapi eot adalah solusi berpemilik.
ttfdan otfmerupakan font lama yang normal, sehingga beberapa orang merasa jengkel karena ini berarti siapa pun dapat mengunduh font mahal dengan lisensi secara gratis.
Waktu berlalu, SVG 1.1 menambahkan bab "font" yang menjelaskan cara memodelkan font murni menggunakan markup SVG, dan orang-orang mulai menggunakannya. Semakin banyak waktu berlalu dan ternyata mereka benar - benar mengerikan dibandingkan dengan hanya format font normal, dan SVG 2 dengan bijak menghapus seluruh bab lagi.
Kemudian, woffditemukan oleh orang-orang dengan sedikit pengetahuan domain, yang memungkinkan untuk meng-host font dengan cara yang membuang bit yang sangat penting untuk instalasi sistem, tetapi tidak relevan untuk web (membuat orang khawatir tentang pembajakan bahagia) dan memungkinkan kompresi internal agar lebih sesuai dengan kebutuhan web (membuat pengguna dan host senang). Ini menjadi format yang disukai.
Sunting 2019 Beberapa tahun kemudian, woff2dirancang dan diterima, yang meningkatkan kompresi, mengarah ke file yang lebih kecil, bersama dengan kemampuan untuk memuat satu font "di bagian" sehingga font yang mendukung 20 skrip dapat disimpan sebagai "potongan" "pada disk sebagai gantinya, dengan browser secara otomatis dapat memuat font" di bagian "sesuai kebutuhan, daripada perlu mentransfer seluruh font di depan, lebih lanjut meningkatkan pengalaman penyusunan huruf.
Jika Anda tidak ingin mendukung IE 8 dan lebih rendah, dan iOS 4 dan lebih rendah, dan Android 4.3 atau lebih lama, maka Anda cukup menggunakan WOFF (dan WOFF2, WOFF yang lebih tinggi, untuk browser terbaru yang mendukungnya.)
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}
Dukungan untuk woffdapat diperiksa di http://caniuse.com/woff
Dukungan untuk woff2dapat diperiksa di http://caniuse.com/woff2
woff... memiliki mode yang menghentikan orang membajak font ? Bagaimana bisa? Apakah itu bekerja?Woff adalah bentuk terkompresi (zip) dari font TrueType - OpenType. Ini kecil dan dapat dikirim melalui jaringan seperti file grafik. Yang paling penting, cara ini font dipertahankan sepenuhnya termasuk rendering tabel aturan yang sangat sedikit orang pedulikan karena mereka hanya menggunakan skrip Latin.
Lihatlah [URL mati dihapus]. Font yang Anda lihat adalah web eksperimental yang dikirimkan smartfont (woff) yang memiliki ribuan karakter gabungan yang membuat bentuk kompleks. Teks yang mendasarinya adalah kode Latin sederhana dari Singhala yang diromanisasi. (Salin dan tempel ke Notepad dan lihat).
Hanya woff yang dapat melakukan ini karena tidak ada yang memiliki font ini dan belum terlihat di mana saja (Mac, Win, Linux dan bahkan pada smartphone oleh semua browser kecuali oleh IE. IE tidak memiliki dukungan penuh untuk Open Type).
sumber
WOFF 2.0, berdasarkan pada algoritma kompresi Brotli dan peningkatan lain pada WOFF 1.0 yang memberikan pengurangan lebih dari 30% dalam ukuran file, didukung di Chrome, Opera, dan Firefox.
http://en.wikipedia.org/wiki/Web_Open_Font_Format http://en.wikipedia.org/wiki/Brotli
http://sth.name/2014/09/03/Speed-up-webfonts/ memiliki contoh tentang cara menggunakannya.
Pada dasarnya Anda menambahkan url src ke file woff2 dan menentukan format woff2. Penting untuk memiliki ini sebelum format woff: browser akan menggunakan format pertama yang didukungnya.
sumber