@font-face是CSS3中的一個模組, 它主要是把自己定義的Web字型嵌入到網頁中, 讓網頁上使用的字型可以不受客戶端字型庫的限制.

這個功能雖然是非常HAPPY的, 但是在使用中還是會碰到一點問題

想學習的同學可以去這裡 ( http://www.w3cplus.com/content/css3-font-face ) , 講的非常不錯, 下面我們來說問題

使用@font-face的頁面在本地測試, 各瀏覽器字型顯示正常, 上傳至伺服器端後訪問, IE9不能正常顯示WEB字型, Chrome和Firefox字型顯示均正常.

檢視IE9控制檯提示

於是就開始瞭解決BUG的過程..

之前的CSS程式碼:

@font-face
{
    font-family:'webfont';
    src:url('fonts/webfont.eot');
    src:local('☺'),
        url('fonts/webfont.woff') format('woff'),
        url('fonts/webfont.ttf') format('truetype'),
        url('fonts/webfont.svg#webfontOTINA1xY') format('svg');
        font-weight:normal;
        font-style:normal;
}
 

在百度裡搜到的一般都是這個 ( 貌似遇到這個問題的人不是很多.. )

( http://technet.microsoft.com/zh-cn/magazine/hh180764(VS.85).aspx )

百度後大概知道了貌似是字型許可權的問題..之後谷歌了一下( 順便把有道也打開了.. ) ..發現了下面這個..( 看來這位仁兄和我遇到同樣的問題了.. )

( http://stackoverflow.com/questions/5587956/make-adobe-fonts-work-with-css3-font-face-in-ie9 )

之後下面就有了解決方案

大意就是應該寫下面那樣的一段話, 於是修改成如下程式碼:

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

嗯..貌似木有問題了..

總結: 字型檔案中有一個嵌入許可權 ( embedding permissions ) IE9對WEB字型的嵌入需要這個字型的許可權, 針對IE將EOT字型格式修改成'embedded-opentype', 可以避免這個問題..至於為什麼是'embedded-opentype', 目前認識的還不是很清楚..各位如果知道的話希望能夠告訴我..

嗯..大概就是這些了..有問題的話希望大家能夠指正.. ---------------------  作者：彼岸的風  來源：CSDN  原文：https://blog.csdn.net/shore_w/article/details/8976188  版權宣告：本文為博主原創文章，轉載請附上博文連結！