Apa sebenarnya font web, dan apa artinya konversi menjadi font?

15

Saya telah membaca beberapa artikel tentang ini tetapi perbedaan teknis yang sebenarnya antara font web dan font desktop masih menghindari saya. Semakin banyak saya membaca tentang topik semakin saya merasa bahwa tidak ada yang memiliki definisi teknis yang jelas tentang apa sebenarnya webfont itu.

Ketika saya mengunggah font "desktop" ke layanan penghasil webfont seperti FontSquirrel, apa sebenarnya yang dilakukan layanan-layanan itu terhadap file font untuk menjadikannya font web? Jika penggunaan utama layanan ini adalah konversi ke format yang berbeda, format apa yang sebenarnya dibutuhkan di web modern untuk mendukung jumlah browser yang masuk akal pada 2019?

fonts web-fonts web-safe

— Hasyim
sumber

17

"Font web" hanyalah font yang digunakan di web atau di browser. Apa yang dilakukan oleh generator font web ini hanya membuat hidup Anda lebih mudah dengan memberikan Anda css yang diperlukan untuk menyajikan font kepada pengunjung Anda dan mengonversi font Anda ke semua format file yang Anda perlukan untuk memastikan font tersebut bekerja lintas browser.

Beberapa font dianggap "web-safe" hanya dengan menjadi begitu umum sehingga setiap komputer memilikinya, seperti "Arial". Anda tidak perlu melakukan apa pun kecuali memberi tahu situs web untuk menggunakan font itu. Font web perlu diunduh oleh browser pengunjung karena jika font tidak ada di komputer Anda, Anda tidak akan melihatnya.

Format font yang dikembangkan khusus untuk web, seperti Woff dirancang dengan mempertimbangkan ukuran file kecil. Font Google melayani Anda dengan berbagai format dengan cara ini juga, itu hanya sedikit tersembunyi.

Sangat penting untuk dicatat bahwa beberapa font mungkin memiliki lisensi font web yang terpisah, yang mungkin tidak Anda miliki walaupun Anda memiliki file font tersebut. Sama seperti gambar google ... Hanya karena Anda dapat mengunduh gambar, tidak berarti Anda dapat menggunakannya untuk menjual aftershave perusahaan Anda.

Developers.google.com memiliki pos bagus yang berfokus pada pengoptimalan font web tetapi juga memiliki dasar-dasar.

Ada kutipan yang cukup bagus tentang berbagai format dalam artikel itu:

Saat ini ada empat format wadah font yang digunakan di web: EOT, TTF, WOFF, dan WOFF2. Sayangnya, terlepas dari berbagai pilihan, tidak ada satu format universal yang berfungsi di semua browser lama dan baru: EOT adalah IE saja, TTF memiliki dukungan IE parsial, WOFF menikmati dukungan terluas tetapi tidak tersedia di beberapa browser lama , dan dukungan WOFF 2.0 sedang dalam proses untuk banyak browser.

Jadi, di mana itu meninggalkan kita? Tidak ada satu format yang berfungsi di semua browser, yang berarti bahwa kami perlu memberikan banyak format untuk memberikan pengalaman yang konsisten

Transfonter juga memiliki tabel yang cukup bagus tentang dukungan browser:

— Joonas
sumber

6

Tabel-tabel dukungan itu sudah ketinggalan zaman. Gunakan caniuse.com bukannya: caniuse.com/#search=woff2

— curiousdannii

Benar. Saya menggunakannya karena memiliki semua format dalam satu dan saya pikir itu memberi tahu Anda kisah tentang berbagai dukungan browser, itulah sebabnya generator font ini adalah sesuatu. Saya mempertimbangkan untuk meninggalkannya karena saya pikir itu sedikit di luar topik, tetapi jelas saya tidak menyadari betapa OP peduli tentang hal ini .

— Joonas

@Joonas Saya percaya semua pengembang web profesional harus peduli tentang ini. Ini tidak seperti kita berbicara tentang teori rumit di sini - penggunaan browser dan UX yang baik memiliki implikasi yang sangat nyata untuk situs web. Misalnya, jika Anda menjalankan situs e-niaga yang mendapat banyak lalu lintas ke pengguna di India, misalnya, tidakkah Anda ingin memastikan bahwa pengguna mendapatkan tingkat UX yang sama dengan yang diperoleh pengguna lainnya?

— Hashim

@Hashim, saya agak berkomentar buruk. Posting asli adalah "apa itu font web" dan pertanyaan yang Anda selipkan di bagian paling akhir tentang format mana yang Anda butuhkan pada tahun 2019 tampak seperti renungan bagi saya, terutama ketika Anda tampak ingin tahu tentang generator font web ... Dan ketika Anda menggunakan salah satu generator itu, informasi itu menjadi sedikit tidak perlu karena itu adalah solusi lintas browser. Tapi kemudian Anda membuat posting di mana Anda memecah setiap format, yang membuat saya menyadari bahwa bagian dari jawaban yang secara sadar saya abaikan sepertinya lebih besar daripada yang saya harapkan.

— Joonas

1

@Hashim, sekali lagi, pilihan kata yang buruk dari saya. Pikiran saya adalah sesuatu di sepanjang baris "Ini adalah orang yang tidak tahu apa font web. Dia berbicara tentang generator font web. Ok, dia tidak perlu tahu bagian terakhir itu jika dia akan menggunakan sebuah generator ... Tapi izinkan saya menambahkan beberapa statistik peramban untuk menggambarkan mengapa generator ini adalah sesuatu ". Jika ada, saya salut kepada Anda karena telah mengambil langkah berikutnya dan memeriksa sendiri.

— Joonas

3

Saya melakukan penelitian yang lebih terperinci setelah mengajukan pertanyaan ini, dan saya juga menambahkan jawaban ini sebagai tambahan untuk bahasa Joonas, yang bagus tetapi tidak menjawab pertanyaan terakhir saya dengan cukup detail untuk saya:

Jika penggunaan utama layanan ini adalah konversi ke format yang berbeda, format apa yang sebenarnya dibutuhkan di web modern untuk mendukung jumlah browser yang masuk akal pada 2019?

Banyak pengembang berpendapat bahwa WOFF dan WOFF2 adalah satu-satunya format font yang diperlukan dalam pengembangan web modern . Namun jawaban tersebut tidak bersumber dengan baik, dan saya juga berpikir mereka agak terlalu bersemangat, jadi mari kita mulai dengan melihat angka dukungan aktual untuk WOFF dan WOFF2, milik CanIUse.com, yang merupakan standar industri untuk mendokumentasikan ini semacam itu.

Dukungan untuk WOFF2

WOFF2 meningkat pada WOFF dalam segala hal, didukung oleh sebagian besar browser desktop yang dirilis setelah 2014, tetapi baru sejak 2018 mulai didukung oleh sebagian besar browser seluler. Ini didukung oleh sekitar 93% browser secara global.

Dukungan untuk WOFF

WOFF mulai didukung oleh Internet Explorer di IE9 (dirilis pada 2011), yang membuat format EOT usang untuk versi IE yang dirilis sejak 2011. Didukung oleh sekitar 97% browser secara global.

Browser desktop lain mulai mendukung WOFF pada waktu yang hampir bersamaan, termasuk Firefox sejak Firefox 3.6, Chrome sejak Chrome 5, dan Safari sejak 5.1 (dirilis masing-masing pada 2010, 2011 dan 2011), membuat format TTF dan OTF ¹ usang dalam versi sebelumnya. . Sebagian besar browser seluler telah mendukung WOFF sejak 2013.

Peringatan dan Kesimpulan

Dari sudut pandang ini, cukup mudah untuk menghapus semua format lain sebagai tidak perlu, tetapi perangkat lunak yang tidak lagi didukung secara resmi tidak pernah menjadi indikator yang baik bahwa itu tidak lagi digunakan. Dengan kata lain, pembagian versi peramban global sama sekali tidak dijamin untuk mewakili demografi yang akan digunakan oleh situs web Anda.

Pembagian versi browser dapat bervariasi secara dramatis di antara demografi: faktor-faktor seperti negara, kelas sosial, dan pendapatan semuanya sangat memengaruhi perangkat apa (dan karenanya, versi browser) yang digunakan oleh pengguna Anda. Sebagai pengembang, pikirkan apakah situs yang Anda bangun akan digunakan oleh demografi yang lebih cenderung menggunakan versi yang lebih lama.

Jika Anda memutuskan bahwa itulah masalahnya, dan Anda perlu mendukung browser desktop yang lebih tua dari 2011, atau browser seluler yang lebih tua dari 2013, gunakan tumpukan font lengkap: WOFF2, WOFF, TTF (atau OTF), dan EOT.

Jika Anda tidak perlu mendukung browser kuno itu, dan masih benar bahwa Anda kemungkinan besar tidak, cukup gunakan WOFF2 dan WOFF sebagai tumpukan font Anda dari sini.

_{(1) TTF dan OTF adalah format font desktop tradisional, dan browser apa pun yang mendukung yang satu mendukung yang lain, jadi jangan pernah menggunakan keduanya}

— Hasyim
sumber

Terkait: cara mengkonversi file font TTF / OTF ke format WOFF dan WOFF2 menggunakan baris perintah (dan karenanya, dalam jumlah besar, bukan satu per satu).

— Hashim

1

Tidak banyak.

WOFF tidak lain adalah format terkompresi untuk TTF, menghasilkan ukuran yang lebih kecil. Internal tidak berubah. WOFF2 melangkah sedikit lebih jauh, ia memodifikasi representasi font sedikit untuk menambah sedikit kompresi. EOT, sebagai format MS-only, tidak masuk hitungan sama sekali. SVG secara praktis kontur saja, hampir tidak lebih, sehingga tidak dihitung sebagai font nyata, hanya menggunakannya untuk ikon, jika sama sekali.

Cukup gunakan WOFF dan lakukan saja. Jika Anda ingin memeras byte terakhir, Anda mungkin ingin menawarkan WOFF2 juga tetapi perbedaannya dapat diabaikan.

— Gábor
sumber

0

Saya ingin menekankan sesuatu yang sangat mendasar, meskipun: "webfont", detail implementasi teknis, adalah font yang telah Anda lisensikan, oleh pembuatnya atau pemegang hak untuk tugas spesifik penggunaan di situs web. Dan itu akan datang dalam format webfont. Jika Anda duduk di depan generator untuk mengubah font menjadi format webfont dan itu bukan open-source atau yang Anda gambar sendiri, berhenti di situ! Anda hampir pasti melanggar lisensi dan bisa dituntut. Dan karena itu di web, mudah bagi orang untuk menemukan apa yang Anda lakukan dan memeriksa daftar penjualan mereka.

Lihat misalnya doofus ini , yang telah melakukan pekerjaan untuk Facebook dan Google, yang tidak menyadari sampai seseorang mengatakan kepadanya bahwa ia secara teknis menggunakan font bajakan di situs webnya. Dia memiliki lisensi berlangganan desktop, tetapi itu bukan lisensi untuk penggunaan web.

— Copilot
sumber