Mengapa @font-face Saya Berfungsi dalam Semua Pelayar Kecuali IE9?

@font-face Conundrum: Isu Paparan dalam IE9 Semasa Berfungsi dalam Penyemak Imbas Lain

Dalam kes aneh gangguan tipografi web, pengguna telah mengalami anomali dengan @font-face. Fon yang dimaksudkan dipaparkan dengan sempurna dalam setiap penyemak imbas kecuali IE9, membuatkan pengguna tertanya-tanya. Selain itu, fon secara tidak jelas kelihatan pada versi tempatan tapak web tetapi hilang apabila digunakan secara langsung.

Tapak web yang dimaksudkan, bigwavedesign.co.uk/gcc/gcc/, menggunakan pengisytiharan @font-face berikut:

    @font-face {
                font-family: 'LeagueGothicRegular';
                src: url('league_gothic_0-webfont.eot');
                src: local('League Gothic Regular'), url('league_gothic_0-webfont.woff') format('woff'), url('league_gothic_0-webfont.ttf') format('truetype'), url('league_gothic_0-webfont.svg#webfonta36nFpyE') format('svg');font-weight: normal;font-style: normal;
}

Anomali ini telah membingungkan pengguna, mendorong mereka untuk menyiasat kemungkinan punca. Dalam penemuan yang mengejutkan, mereka mendapati bahawa tapak web yang berbeza, iamthomasbishop.com, berjaya menghasilkan fon yang sama dengan jayanya dalam IE9. Menentukan cara tapak ini mencapai kejayaan ini kekal sebagai teka-teki.

Akhirnya, isu ini disyaki berpunca daripada keutamaan IE9 untuk versi fon .woff berbanding versi .eot. Menggabungkan rangkaian penuh variasi fon ke dalam projek menggunakan subrutin smileyface-local telah menyelesaikan isu tersebut. Kod yang dikemas kini kini berfungsi dengan lancar dalam semua versi IE:

@font-face {
  font-family: "LucidaFax-bold";
  src: url("_font/LucidaFax-bold.eot");
  src: local("☺"),
  url("_font/LucidaFax-bold.woff") format("woff"),
  url("_font/LucidaFax-bold.ttf") format("truetype"),
  url("_font/LucidaFax-bold.svg#LucidaFax-bold") format("svg");
  }

Oleh itu, misteri fon yang hilang dalam IE9 telah dirungkai, menunjukkan kepentingan untuk mempertimbangkan kebiasaan khusus pelayar dalam reka bentuk web dan kuasa penyelesaian masalah secara kolaboratif dalam mengatasi cabaran teknikal.

Atas ialah kandungan terperinci Mengapa @font-face Saya Berfungsi dalam Semua Pelayar Kecuali IE9?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!