Mengapa @font-face Saya Tidak Berfungsi dalam IE9 pada Tapak Langsung?

Menyahpepijat Isu @font-face dalam IE9

Walaupun berfungsi dengan lancar dalam IE8 dan penyemak imbas lain, @font-face menghadapi masalah paparan dalam IE9. Masalah ini timbul secara khusus pada tapak langsung, manakala tontonan setempat pada komputer pengguna tidak menimbulkan sebarang isu.

Kod CSS yang dimaksudkan ialah:

@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;
}

Masalah yang sama telah dilaporkan , dengan fon berfungsi dalam semua versi IE kecuali IE9. Walau bagaimanapun, menukar Mod Dokumen (melalui alat pembangun F12) menyelesaikan isu itu, walaupun tidak ideal.

Kemas kini:

Penyiasatan telah mendedahkan bahawa IE9 menggunakan .woff variasi fon dan bukannya versi .eot yang dimaksudkan. Dengan memasukkan variasi fon lengkap yang dihasilkan oleh penjana fontsquirrel @font-face dan menggunakan teknik smileyface-local, isu itu telah diselesaikan:

@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");
  }

h1 { font-family: "LucidaFax-bold", serif;}

Selain itu, teks Mark "Tarquin" Wilton-Jones- shadow hack telah digunakan untuk mencapai penggayaan visual yang konsisten merentas versi IE.

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