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

条件评论不起作用

1 个答案: