Rumah >hujung hadapan web >tutorial js >Mengapa fon woff tergantung di firefox
Penyelesaian masalah Woff Font Memuatkan Isu di Firefox
Saya menghadapi kesukaran memuatkan font Oswald Woff tempatan di Firefox, walaupun ia berfungsi dengan betul di Chrome dan IE9. Tab Rangkaian Pelayar mendedahkan permintaan gantung dan digugurkan.
kenapa woff?
woff (format font terbuka web) menawarkan beberapa kelebihan:
Debugging the Firefox Issue
Dokumentasi Mozilla di Woff tidak membantu. Semasa menuntut Firefox 3.6 menyokong Woff melalui, pelaksanaan saya gagal. Cadangan untuk menentukan jenis MIME dalam fail @font-face
Apache (.htaccess
) dan menambah tajuk caching tidak menyelesaikan masalah. AddType application/x-font-woff .woff
dan blog Hacks Mozilla juga menunjukkan sokongan Woff, menambah lagi kekeliruan. Menambah font sandaran TTF (caniuse.com
) seperti yang dicadangkan dalam jawatan lain juga terbukti tidak berkesan. Pemuatan JavaScript (menggunakan Google Web Fonts API) bekerja tetapi masih meninggalkan permintaan gantung untuk fon yang ditentukan secara tempatan. Menambah lebih banyak jenis MIME dalam url(fonts/GenR102.ttf) format("truetype")
, termasuk fon EOT dan TTF dengan tajuk tamat tempoh, menghasilkan kejayaan separa, tetapi beberapa permintaan Woff tetap tergantung. Ia tidak disebabkan oleh fail yang hilang; fon wujud. .htaccess
CSS saya termasuk pengisytiharan berasingan
untuk berat font Oswald yang berbeza (berani, ringan, biasa): @font-face
<code class="language-css">@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 700; src: local('Oswald Bold'), local('Oswald-Bold'), url(http://jquery4u.com/wp-content/themes/jquery4u/css/fonts/oswald/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 300; src: local('Oswald Light'), local('Oswald-Light'), url(http://jquery4u.com/wp-content/themes/jquery4u/css/fonts/oswald/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); } @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400; src: local('Oswald Regular'), local('Oswald-Regular'), url(http://jquery4u.com/wp-content/themes/jquery4u/css/fonts/oswald/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff'); } /* custom font */ h1 { font-family: 'Oswald', sans-serif; }</code>
Permintaan gantung yang tersisa mungkin disebabkan oleh pengendalian Firefox pelbagai fail Woff untuk berat fon yang berbeza. Penyiasatan lanjut diperlukan untuk menentukan sebab yang tepat.
soalan yang sering ditanya mengenai fon woff
(Bahagian ini tetap tidak berubah dari input asal, kerana ia adalah bahagian FAQ yang berasingan dan tidak perlu menulis semula untuk konteks masalah penyelesaian masalah.)
Apakah perbezaan antara woff dan format fon lain?
Menukar fon anda ke Woff boleh dilakukan menggunakan alat dalam talian seperti Transfonter atau Generator Squirrel. Anda hanya memuat naik fail fon anda, pilih format yang ingin anda tukar, dan muat turun fail yang ditukar. Ingatlah untuk memeriksa pelesenan fon anda sebelum menukar, kerana sesetengah mungkin tidak membenarkan penukaran atau penggunaan web.
Jika fon Woff anda tidak dipaparkan dengan betul di Firefox, ia mungkin disebabkan oleh beberapa sebab. Pertama, periksa sama ada fon dimuatkan dengan betul di CSS anda. Sekiranya, cuba membersihkan cache penyemak imbas anda atau periksa sama ada fon disekat oleh perlindungan penjejakan Firefox. Sekiranya masalah itu berterusan, ia mungkin disebabkan oleh pepijat dalam fon fon firefox.
Untuk menggunakan fon woff di laman web anda, anda perlu mengisytiharkannya dalam CSS anda menggunakan peraturan @font-face. Kemudian, anda boleh menggunakan harta keluarga font untuk memohon font ke elemen pada halaman anda. Ingatlah untuk memasukkan fon sandaran sekiranya fon woff gagal memuatkan.
Fon Woff disokong secara meluas oleh semua pelayar moden, termasuk Chrome, Firefox, Safari, dan Edge. Walau bagaimanapun, untuk versi lama penyemak imbas ini atau penyemak imbas lain yang kurang biasa, anda mungkin perlu memasukkan fon sandaran di CSS anda.
sama ada anda boleh menggunakan fon Woff untuk projek komersil bergantung kepada pelesenan fon. Sesetengah fon adalah percuma untuk kegunaan peribadi dan komersial, sementara yang lain mungkin memerlukan lesen untuk kegunaan komersil. Sentiasa periksa maklumat pelesenan sebelum menggunakan font untuk projek anda.
Fon Woff mempunyai beberapa kelebihan. Mereka bersaiz kecil, yang bermaksud mereka memuat lebih cepat di laman web. Mereka juga disokong oleh semua pelayar utama, menjadikan mereka pilihan yang boleh dipercayai untuk reka bentuk web. Di samping itu, fon Woff boleh termasuk metadata dan struktur data penggunaan swasta, yang boleh berguna untuk pereka fon dan pengguna.
Untuk mengoptimumkan fon Woff untuk prestasi yang lebih baik, anda boleh menggunakan subsetting fon untuk memasukkan hanya watak yang anda perlukan. Ini mengurangkan saiz fail font, menjadikannya lebih cepat. Anda juga boleh menggunakan strategi pemuatan fon seperti font-display atau API pemuatan fon untuk mengawal bagaimana fon dimuatkan dan dipaparkan pada halaman anda.
Ya, anda boleh membuat fon woff anda sendiri. Anda boleh merancang fon anda sendiri menggunakan perisian seperti Fontforge atau Glyphs, kemudian menukarnya ke Woff menggunakan alat atau perisian dalam talian. Ingatlah untuk memeriksa keserasian dan prestasi fon anda dalam pelayar yang berbeza.
Woff2 adalah versi kedua format fon terbuka web. Ia menawarkan mampatan yang lebih baik daripada Woff, menghasilkan saiz fail yang lebih kecil dan masa beban yang lebih cepat. Walau bagaimanapun, ia tidak disokong secara meluas sebagai Woff, jadi anda mungkin perlu memasukkan versi font anda sebagai sandaran.
Atas ialah kandungan terperinci Mengapa fon woff tergantung di firefox. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!