Условные комментарии не работают

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