有條件的評論不起作用

Question

我正在建立一個網站，需要通過@ font-face使用自定義字體。如果我使用.eot擴展名，IE只會顯示;其他瀏覽器只有當我使用.ttf擴展名。

雖然我已經在Web上嘗試了大量的建議，但我無法解決如何使用條件註釋來使用這兩種建議......沒有任何工作適合我。

從本質上講，我有：

<style> 
@font-face{ 
font-family: Square; 
src: url(/wpadmin/fonts/Square.ttf); 
} 

@font-face{ 
font-family: Square_IE; 
src: url(/wpadmin/fonts/Square.eot); 
} 

</style> 

<!--[if !IE]><!--> 
<style> 
#Title{ 
font-family:Square; 
} 
</style> 
<!--<![endif]--> 

<!--[if IE]><!--> 
<style> 
#Title{ 
font-family:Square_IE; 
} 
</style> 
<!--<![endif]--> 

字體只能在IE中顯示正確的位置 - 不能在其他瀏覽器。如果我刪除[如果IE]語句，它會在其他瀏覽器中正確顯示。

我已經嘗試了很多變體，包括HTML體內的條件語句。

我在做什麼錯？

Answer 1

條件註釋在IE 11中不起作用，但這也不是標準方法。您不需要不同的字體名稱，您可以爲所有引用一個名稱的跨瀏覽器字體文件列表執行此操作。

/* declare all the files - browser will use the best it understands */ 

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


/* now just reference the one name */ 

#Title { 
    font-family:Square; 
}