Rumah > hujung hadapan web > tutorial css > Mengapa @font-face Saya Berfungsi dalam Semua Pelayar Kecuali IE9?

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

Susan Sarandon
Lepaskan: 2024-11-02 00:14:02
asal
507 orang telah melayarinya

Why Does My @font-face Work in All Browsers Except for 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;
}
Salin selepas log masuk

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");
  }
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan