Jika saya hanya memiliki WOFF dan EOT, browser apa yang saya dukung dengan @ font-face?

Kami sedang mencari untuk membeli font yang hanya memungkinkan penggunaannya di web dalam format yang disediakan: WOFF dan EOT.

Saya tidak yakin browser apa yang berfungsi dan sepertinya tidak dapat menemukan informasi terkini. Browser apa yang dapat saya dukung hanya dengan keduanya?

Satu-satunya pengalaman saya adalah dengan sintaks fontspring yang memiliki EOT, WOFF, TTF dan SVG.

fonts standards css3 erik
sumber

Pertanyaan terkait di situs Desain Grafis: Apa format font web terkecil yang mencakup semua browser?

user56reinstatemonica8

Jawaban:

Ini adalah cara pemuatan standar dengan @ font-face , perbaikan hacky dan semuanya !!

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('BebasNeue-webfont.eot');
    src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('BebasNeue-webfont.woff') format('woff'),
         url('BebasNeue-webfont.ttf') format('truetype'),
         url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Tetapi hapus SVG dan Anda akan kehilangan dukungan untuk iOS <5.0 hampir sepenuhnya

Dapatkah saya menggunakan memiliki tabel yang sangat baik untuk dukungan browser pada umumnya yang lain untuk EOT , satu lagi untuk WOFF , satu lagi untuk SVG dan akhirnya satu lagi untuk TTF . Saya telah memasukkannya di bawah ini untuk kejelasan, dan ini akan memandu Anda tentang apa yang harus diuji, tetapi ingatlah ini akan berubah cukup cepat.

Sunting oleh wyu : Saya telah menyusun tabel sehingga Anda dapat melihat dukungan berdampingan

Dukungan font-face browser umumnya

Dukungan font-face browser umumnya

Dukungan browser EOT

Dukungan browser EOT

Dukungan browser WOFF

Dukungan browser WOFF

Dukungan browser SVG

Dukungan browser SVG

Dukungan browser TTF

Dukungan browser TTF

toomanyairmiles
sumber

mengapa eot dideklarasikan dalam dua cara berbeda - .eot dan .eot? #iefix?

sam

@sem stackoverflow.com/questions/8050640/…

Diego Agull

Bagi siapa saja yang memeriksa jawaban ini di masa depan ... Android> = 4.4 sekarang mendukung WOFF caniuse.com/#feat=woff

ozke

Dear @ozke, saya dari masa depan, terima kasih telah berbagi fakta bermanfaat ini. Anda juga mungkin tertarik untuk mengetahui bahwa, pada akhir 2015, penggunaan versi peramban stok Android yang tidak mendukung woffakan turun hingga kurang dari 2% pengguna global, dan peramban stok Android akan dikalahkan oleh Chrome untuk Android (16%) dan UC (8%), keduanya mendukung woff. Firefox untuk Android juga; Namun, penggunaannya tidak akan pernah melebihi 1%. Anda sekarang dapat kembali mendengarkan "All About That Bass" oleh Meghan Trainor, yang saya pahami adalah kebiasaan pada Oktober 2014.

user56reinstatemonica8

jadi Anda hanya perlu font web sekarang?

SuperUberDuper

SVG tidak akan membantu Anda dengan @ font-face; tetapi, EOT didukung oleh IE; dimana, TTF dan OTF didukung oleh semua browser utama lainnya. Adapun WOFF, dari melakukan beberapa bacaan, dengan kemiripannya dengan TTF dan OTF sangat mungkin bahwa itu didukung di browser yang sama seperti TTF atau OTF. Saran saya, jika Anda benar-benar tertarik, cobalah setiap ekstensi @ font-face di browser dan lihat apa yang Anda dapatkan, lalu kirimkan apa yang Anda dapatkan ke W3C agar mereka memperbarui halaman standar mereka untuk deskriptor @ font-face. (Bahkan tidak termasuk ekstensi font "aman" saat ini).

Jika semuanya gagal, saya cukup yakin W3Schools terkini: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Jeff Langemeier
sumber

Masalahnya adalah bahwa Safari Mobile 4.1 dan yang lebih baru hanya mendukung SVG.

toomanyairmiles

@toomanyairmiles Itu sebabnya pada akhirnya, itu membuatnya terlihat bagus untuk "default" Anda dan kemudian membuatnya tampak luar biasa bagi mereka yang "bisa" melihatnya. Tidak dapat memiliki cakupan 100% karena sebagian besar font tidak memiliki OTF, EOT, DAN SVG sendiri.

Jeff Langemeier

Sebenarnya kamu bisa. Saya telah membangun beberapa situs yang memiliki cakupan 100% dengan membeli font yang datang dalam keempat jenis, atau menggunakan font gratis dan menghasilkan file sendiri - berfungsi dengan baik.

toomanyairmiles

@toomanyairmiles Di sinilah pengetikan yang cepat dan longgar membunuh saya, diperlukan. Tidak selalu dapat memiliki cakupan 100%, kadang-kadang itu tidak terjadi dan perancang harus mengingat bahwa dalam skenario terburuk bahwa orang menggunakan browser lama dan semacamnya, 100 % cakupan tidak selalu berarti cakupan 100%; di mana saya berada di sekitar 40-50% pengguna internet masih menggunakan IE 7 atau lebih tua, yang tidak mendukung font-face dengan baik di tempat pertama, untuk memiliki cakupan 100% benar perlu ada garis bawah yang terlihat "layak" atau setidaknya membuat situs Anda dalam batasan font "yang lebih bagus".

Jeff Langemeier

Yah, saya sudah mencobanya, di situs-situs kecil dan merek-merek besar. Font berfungsi di IE6 dan 7 adalah kualitas render sebagus browser modern? Tidak, tapi itu berfungsi dengan baik.

toomanyairmiles

Vendor Webfont benar-benar perlu memberikan dukungan awal untuk font mereka - khususnya karena ini! Anda akan berpikir ini akan menjadi kebiasaan kedua, bahkan untuk berbasis cloud (dengan opsi untuk menyertakan atau mengecualikan) - jika orang dipaksa untuk memburu font yang masuk daftar hitam, bukankah itu hanya akan mendorong pembajakan setelah font itu ditemukan? @ eb_p1

eburnett
sumber

Tunggu, kenapa? EOT sudah mati ketika pertanyaan ini pertama kali diajukan, itu adalah mayat yang membusuk ketika Anda menjawab, dan hari ini saya belum melihat font EOT lebih dari setahun.

SilverbackNet