html - 条件注释不起作用

Question

我正在构建一个需要通过@font-face 使用自定义字体的网站。 IE 仅在我使用 .eot 扩展名时显示；仅当我使用 .ttf 扩展名时才能使用其他浏览器。

我无法弄清楚如何使用条件注释来同时使用这两者 - 尽管我已经尝试了网络上的大量建议......但对我来说没有任何效果。

基本上，我有:

<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 中正确显示 - 不能在其他浏览器中显示。如果我删除 [if 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;
}