有条件的评论不起作用

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