Mengapa kita harus memasukkan ttf, eot, woff, svg, ... dalam font-face

299

Dalam CSS3 font-face , ada beberapa jenis font yang termasuk seperti ttf, eot, woff, svgdan cff.

Mengapa kita harus menggunakan semua jenis ini?

Jika mereka khusus untuk browser yang berbeda, mengapa jumlahnya lebih besar dari jumlah browser web utama?

css font-face webfonts

— pengguna16948
sumber

Jawaban:

425

Jawab di 2019:

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)

Jawaban asli dari 2012:

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

— Bradshaw yang kaya
sumber

iOS 5 mendukung WOFF.

— Rob

woff... memiliki mode yang menghentikan orang membajak font ? Bagaimana bisa? Apakah itu bekerja?

— Mark Amery

TTF seharusnya tidak lebih ringan dari WOFF. WOFF adalah bentuk terkompresi dari font TrueType - OpenType (ttf dan otf).

— toto_tico

Maksud WOFF bukanlah anti-pembajakan. TypeKit mengatakan, "dua manfaat utama OpenType / CFF font memiliki lebih dari font TrueType adalah 1) ukuran file yang lebih kecil, dan bahwa 2) mereka memerlukan informasi yang jauh lebih sedikit untuk membuat baik dalam lingkungan yang memungkinkan beberapa bentuk anti-aliasing. "

— Michael McGinnis

@Zelphir alat membuatnya sulit untuk membuat font yang dapat diembed dengan bendera itu, dan desainer run-off-the-mill Anda adalah program-buta huruf dan hanya bisa menghapus bendera jika seseorang merancang aplikasi Mac dengan tombol "font bajak laut" yang mengkilap. Apalagi, jika mereka adalah korporasi, Anda dapat mengajukan tuntutan hukum. Jika mereka adalah seorang pria dengan blog, berbicara dengan mereka, gagal itu, host mereka, dll - tetapi perlu diingat orang-orang yang tidak dapat membeli font Anda bukan pelanggan potensial, jadi saya akan mengatakan publisitas gratis bernilai lebih daripada kerumitan meyakinkan mereka untuk hanya menukarnya dengan hal terdekat di dafont.

— Camilo Martin

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).

— pengguna2422970
sumber

Saya tidak melihat sesuatu yang istimewa di situs web itu. Jika saya menyalinnya ke editor (memiliki dukungan utf8) saya masih melihat hanya teks biasa. Apa sebenarnya yang dilakukan woff?

— Zelphir Kaltstahl

Dua pertiga dari jawaban ini salah atau tidak relevan. Juga tautan itu rusak.

— Yay295

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.

— Jyrki Alakuijala
sumber