ie上 CSS3114: @font-face 未能完成 OpenType 嵌入權限檢查。(包括圖標無法顯示)

轉自:http://blog.csdn.net/shore_w/article/details/8976188

@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'.