Why is IE8 not loading my eot files?

2019-01-26 09:29发布

站内问答 / HTML/CSS
1867 4 5

I downloaded some otf fonts and then converted them to eot using: https://onlinefontconverter.com but when I view the site in IE8, the fonts do not show (they show in Chrome, Firefox, Opera, Android). Something must be wrong with either my code or the eot. Does anyone know what's wrong?

(Download Roboto here: http://www.fontsquirrel.com/fonts/roboto )

(Convert it here: https://onlinefontconverter.com )

STYLES.CSS

@font-face
{
    font-family: RobotoCondensed;
    src: url("Roboto-Condensed.eot");
}

@font-face
{
    font-family: RobotoCondensed;
    src: url("Roboto-Condensed.ttf");
}

.myDiv
{
    font-family: RobotoCondensed, Arial, Helvetica;
    font-size: 10px;
    color: #e8e8e8;
}

index.html (relevant code)

<div class="myDiv">Some font in here that shows incorrectly as Arial!</div>

The stylesheet and font are in the same folder.

4条回答
Luminary・发光体
2楼-- · 2019-01-26 10:00

Try

font-family: "RobotoCondensed", Arial, Helvetica;

The quotes should force it as your primary option

查看更多
0人赞 添加讨论(0) 举报
爱情/是我丢掉的垃圾
3楼-- · 2019-01-26 10:01

Thanks for all the help. It looks like the problem was the font converter. The eot file was not being recognized as valid by IE. Thanks to "Joel Eckroth" for suggesting I try other converters.

查看更多
0人赞 添加讨论(0) 举报
贪生不怕死
4楼-- · 2019-01-26 10:03

I had a problem and no amount of tweaking and web research helped
Until I edited head tag to include meta


<head>

   <meta http-equiv="Content-type" content="text/html;charset=utf-8"/>

</head>


The meta tag solved problem and every variation worked!

Variation 1


<style type="text/css">

  @font-face

  {

    font-family: 'SolaimanLipi';

    src: url('SolaimanLipi.eot');

    src: local('SolaimanLipi'),url('SolaimanLipi.ttf') format('truetype');

  }

  @font-face

  {

    font-family: 'Yogesh';

    src: url('CDACOTYGN.eot');

    src: url('CDACOTYGN.ttf') format('truetype');

  }

</style>


Variation 2


<style type="text/css">

  @font-face{

    font-family: 'solaimanlipi';

    src: url('cdacotygn-webfont.eot');

    src: url('cdacotygn-webfont?#iefix') format('embedded-opentype'),

         url('solaimanlipi-webfont.woff') format('woff'),

         url('solaimanlipi-webfont.ttf') format('truetype'),

         url('solaimanlipi-webfont.svg#webfont') format('svg');

  }

  @font-face {

    font-family: 'cdacotygn';

    src: url('cdacotygn-webfont.eot');

    src: url('cdacotygn-webfont.eot?#iefix') format('embedded-opentype'),

         url('cdacotygn-webfont.woff') format('woff'),

         url('cdacotygn-webfont.ttf')  format('truetype'),

         url('cdacotygn-webfont.svg#svgFontName') format('svg');

  }

</style>

We think complex but often needle in haystack is elsewhere head meta tags

You may try and view source
http://www.weloveseppa.com/jnc/jncTryBangla.html
http://www.weloveseppa.com/jnc/try1/jncTryBangla.html

Works in all the browsers including the old IE8

查看更多
0人赞 添加讨论(0) 举报
叛逆
5楼-- · 2019-01-26 10:04

Try this

        @font-face
    {
        font-family: 'RobotoCondensed';
        src: url('Roboto-Condensed.eot');
  src: url('Roboto-Condensed.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Condensed.woff') format('woff'),
         url('Roboto-Condensed.ttf') format('truetype'),
         url('Roboto-Condensed.svg#') format('svg');

}

    .myDiv
    {
        font-family: RobotoCondensed, Arial, Helvetica;
        font-size: 10px;
        color: #e8e8e8;
    }
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)