@ font-face在IE中不能正確顯示

我一直在尋找幾小時，問朋友，它沒有工作。所以我希望你們能幫助我。我的網站使用自定義字體，但IE（10）不支持我這樣做。我不知道它支持其他方法。這裏是我的：@ font-face在IE中不能正確顯示

@font-face { font-family: shardee; src:url('fonts/Shardee.ttf'); }

這是沒有必要在Internet Explorer中的自定義字體，但它會很高興。

當Internet Explorer不知道字體時，它使用其默認字體。但問題是，自定義字體的字體大小是完美的，但Internet Explorer的默認字體太大了。我試圖解決它與IE特定的CSS代碼，但它根本不工作。我使用下面的CSS代碼Interner Explorer中：

<!--[if IE]> 
     <style> 
      #menu ul li{ font-size:15px; } 
     </style> 
    <![endif]-->

我也嘗試過通過一個外部的樣式表，它是這樣的：

<!--[if IE]> 
     <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri() ?>/style/ie.css" /> 
    <![endif]-->

我在PHP中使用該功能是一個WordPress功能，將您帶到您的網站的路徑。如果您不使用wordpress，您可以忘記該代碼並將其留空。

問題不在於路徑，路徑是正確的。我在瀏覽器中查看了源代碼，並向我展示了我在ie.css中的代碼。 ie.css中的代碼與上面完全相同，但沒有標籤等。

我希望你們能幫我解決這個問題。據我所知，有兩種解決方案是可能的。讓ie特定的css工作，或者讓我知道如何在IE中創建自定義字體。我正在使用Internet Explorer版本10.

您可以看到該網站here，但是一旦它被修復，它就會消失，因爲修復後我不需要將它放在子域上。

親切的問候，巴特羅洛夫斯

來源

2013-04-01 Bart Roelofs

爲了使問題有意義對於未來的訪問者，您應該在問題中包含完整的演示代碼，或者提供一個合理永久的在線演示網址，它將*不*固定（即，解決問題）。 –

多種字體格式

爲了支持廣泛的瀏覽器，使用.ttf,.woff和.eot版本的字體。

@font-face { 
    font-family: 'shardee'; 
    src: url('fonts/Shardee.eot'); 
    src: url('fonts/Shardee.eot?#iefix') 
      format('embedded-opentype'), 
     url('fonts/Shardee.woff') format('woff'), 
     url('fonts/Shardee.ttf') format('truetype'); 
}

您可以使用字體轉換網站像Font Squirrel，到.ttf字體轉換成.woff和.eot。

DRM假陽性

由於@Jukka指出，有與同時防止它在Windows中被使用的TTF文件中的法律問題。在IE顯影劑控制檯，則顯示以下錯誤消息：

CSS3114: @font-face failed OpenType embedding permission check. 
Permission must be Installable.

Shardee似乎是與unknown license type一個廢棄字體。儘管使用此字體可能是合法的，但Windows似乎要求每個TTF文件都有DRM信息，明確聲明將其嵌入網頁是合法的。 IE中的錯誤很可能是誤報。

爲了測試這個，我使用了一個TTF字體，該字體已被合法授權在網站上使用。由於DRM錯誤，TTF版本在IE中不起作用。這個例子肯定是誤報。這就是爲什麼需要使用多種字體格式的原因之一，以及爲什麼像TTF這樣的單一格式不適用於所有瀏覽器。

儘管Windows不允許IE使用TTF文件，但IE仍然可以使用WOFF或EOT版本。當我在本地網絡服務器上測試上述@font-face規則時，使用所有三種字體格式，Shardee字體在所有版本的IE中正確呈現（儘管IE開發者控制檯中有錯誤消息）。

步驟來嘗試：

Convert的.ttf文件.woff和.eot
上傳.woff和.eot文件複製到同一目錄中已有的.ttf文件。
將@font-face規則替換爲上面的規則。我在它的最初版本中修復了一些錯別字。

如果仍有問題，可能是Web服務器設置有問題。相關問題：IE9 blocks download of cross-origin web font

來源

2013-04-01 13:17:17

感謝您的回答。但它沒有解決。它使用chrome和Mozilla（以及更多的瀏覽器，我還沒有安裝）。但在IE 10中不起作用。也許我做錯了什麼，但我不知道應該是什麼。 –

@BartRoelofs：我用附加信息更新了答案，並更新了@ @ font-face規則，該規則在使用Shardee字體的本地Web服務器上的所有版本的IE上運行良好。 –

（可選）添加'.svg'文件以支持iOS 4.1及更早版本。 –

所以問題很明顯，在IE 10中，菜單在id=menu的元素中，不會出現在聲明字體「shardee」中，而是出現在瀏覽器的默認字體中。這實際上使菜單可讀。但從技術上講，解釋可以在開發人員工具（按F12輸入它們）中看到，在控制檯窗格中。該錯誤消息（代碼爲CSS3114）告訴@font-face未通過嵌入的使用權檢查。

來源

2013-04-01 13:44:49

FontPrep是一個優秀的Web字體生成器爲Mac OS X.它甚至會創建一個fonts.css

來源

2014-01-17 23:14:51

我遇到了同樣的問題，跑F12。 IE10中爲我所在的網站啓用了兼容性視圖。一旦我禁用兼容性查看顯示的自定義字體。希望這可以幫助別人......

來源

2015-12-04 20:17:16 TryingToWork